在 foreach 循环中查看更多按钮仅适用于第一项答案

【问题标题】：View more button inside a foreach loop only working for first item在 foreach 循环中查看更多按钮仅适用于第一项
【发布时间】：2017-11-29 06:49:53
【问题描述】：

我在 foreach 循环中遍历项目，每个项目都带有“查看更多”标签。当我单击它时，它应该折叠并显示有关该项目的更多信息。我的问题是它只在循环中的第一项折叠。如何使其适用于退回的每件商品？

 @{
                foreach (var news in Model)
                {
                    <div class="col-md-6 col-sm-6 col-xs-12">

                        <div class="single-item  wow fadeInUp animated animated animated animated">
                            <div class="img-box">
                                <div class="img-holder">
                                    <figure><a href="#"><img src="@news.file.Url" alt=""></a></figure>
                                </div>
                            </div>
                            <div class="news-content">
                                <h4><a href="#">@news.Header</a></h4>

                                <div class="collapse" id="collapseExample">
                                    @news.Description
                                </div>

                                <div class="show-more">
                                    <a data-toggle="collapse" href="#collapseExample" data-parent="collapseExample" aria-expanded="true" aria-controls="collapseExample">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }

这是我的循环

【问题讨论】：

标签： html asp.net-mvc

【解决方案1】：

这是因为您正在渲染具有相同 ID 的多个元素试试这个

var index = 1;
foreach(var news in Model){
   [...]

   <div class="collapse" id="collapse_@index">
        @news.Description
   </div>
   <div class="show-more">
       <a data-toggle="collapse" href="#collapse_@index" data-parent="collapseExample" aria-expanded="false" aria-controls="collapse_@index">Read More</a>
   </div>                         

   index++;

   [...]
}

这样它就不会重复一个 ID 元素

【讨论】：