Question

我循环遍历foreach循环中的项目，每个项目都带有一个＆＃34;查看更多＆＃34;标签。单击它时，它应该折叠并显示有关该项目的更多信息。我的问题是它只是为循环中的第一个项目折叠。如何使其适用于所返回的每个项目？

 @{
                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>
                }
            }

这是我的循环

Answer 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元素

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

1 个答案: