如何使用jquery或javascript在onclick案例中执行Onclick Button show和Hide？

Question

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

它有一个条形部分,点击后,下面的内容将显示如下例子: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>
}

澄清

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

Answer 1

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>

Answer 2

如果上面的链接显示了一个工作示例,您可以使用纯css执行此操作.

你需要的是:

.accordion-heading .fa {
  display: none;
  //Other css required for the fa display in general can go here.
}

.AccordionPanelOpen .fa-chevron-up {
  display: block;
}

.AccordionPanelClosed .fa-chevron-down {
  display: block;
}

Answer 3

目前的答案并没有真正回答你的问题,我按照@Arathi的答案,这是通过CSS完成的,当bootstrap手风琴折叠与否时,它将有一个额外的类.该<div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">规则将之间切换.collapsed类和关闭.所以,当这个div有collapsed你想要展示的课程,你想要.fa-chevron-down展示.fa-chevron-up.您可以通过以下代码进行管理:

.accordion-header .fa-chevron-down {
  display: block;
}
.accordion-header .fa-chevron-up {
  display: none;
}
.accordion-header.collapsed .fa-chevron-up {
  display: block;
}
.accordion-header.collapsed .fa-chevron-down {
  display: none;
}

现在,当.accordion-header有了这个collapsed级别的时候,上升的雪佛龙将显示出来,而下行的雪佛龙将隐藏起来.如果你想添加转换或类似的东西,你也可以使用opacity0 - 1.期待你的回复.