How to do Onclick Button显示和隐藏在foreach case使用jquery或javascript？

我正在使用手风琴来关闭和打开内容时点击.

它有一个酒吧部分,点击后,下面的内容将显示如下例：http://jeevanscientific.com/resources.html

我需要在每个酒吧的右侧添加一个向上按钮/按钮.
一旦点击特定的栏只有该栏显示向下按钮.就像隐藏和显示向下按钮相对于按钮点击.

问题是我正在使用foreach来显示项目.如何实现这种情况？

这是我的HTML：

foreach (var i in footerPage.StaticPagePersons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>
                <i class="fa fa-chevron-up table-middle" aria-hidden="true"></i>
                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    @Html.Raw(@i.BioDetail)
                </div>
            </div>
        </div>
    </div>
}

Clarification

每个标签的右侧..这是要求…当点击应该显示按钮,否则按下按钮

解决方法

foreach (var i in person.Persons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>

                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    if(your condition){
                        @Html.Raw(@i.BioDetail) //it will show only if your ncondtion satisfied
                    }
                </div>
            </div>
        </div>
    </div>
}

  <script>
    $(document).ready(function () {
        $('.collapse').on('shown.bs.collapse',function () {
            $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
        });

        $('.collapse').on('hidden.bs.collapse',function () {
            $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
        });
    });
</script>

How to do Onclick Button显示和隐藏在foreach case使用jquery或javascript？

解决方法

猜你在找的jQuery相关文章