使用手风琴引导程序上下图标答案

【问题标题】：icon up and down with accordion bootstrap使用手风琴引导程序上下图标
【发布时间】：2013-07-17 11:18:44
【问题描述】：

我尝试使用 bootstrap 为我的手风琴制作图标 chevron 上下：

我有这个：

我尝试了这个 js，但它不起作用：

<script type="text/javascript">

$('.accordion').on('show hide', function (n) {
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});
</script>

当我点击链接时，人字形不起来。

【问题讨论】：

标签： jquery twitter-bootstrap icons accordion

【解决方案1】：

我已经为这个答案寻找了很多地方（简单）

我找到了这个

<div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">
                         <span class="pull-right"><i class="icon-chevron-up"></i></span>
                                Jai
                        </a>
                      </div>

                      <div id="jai" class="accordion-body collapse in">
                      <div >
                        <div class="accordion-inner">
                          body content 1 
                        </div>
                      </div>
                      </div>
                    </div>
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                          <span class="pull-right"><i class="icon-chevron-down"></i></span>
                                jai2
                        </a>
                      </div>

                      <div id="collapseTwo" class="accordion-body collapse">
                      <div>
                        <div class="accordion-inner">
                          body content 2
                        </div>
                        </div>
                      </div>
                    </div>
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">
                          <span class="pull-right"><i class="icon-chevron-down"></i></span>
                                jai3
                        </a>
                      </div>

                      <div id="collapse3" class="accordion-body collapse">
                      <div>
                        <div class="accordion-inner">
                          body content 3
                        </div>
                        </div>
                      </div>
                    </div>

//jquery --- //你需要让bootstrap运行

$('div.accordion-body').on('shown', function () { console.log($(this).parent("div").find(".icon-chevron-down").html());// this will show you html selected 
$(this).parent("div").find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");

    });

    $('div.accordion-body').on('hidden', function () { console.log(this);
         $(this).parent("div").find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");

//提琴手view working example

【讨论】：

【解决方案2】：

您没有.accordion 元素？

$('.accordion-group').on('show hide', function (n) {
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});

FIDDLE

【讨论】：