jquery - 使用手风琴引导程序上下图标

Question

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

我有这个 ：

http://jsfiddle.net/HwNYB/18/

我尝试了这个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>

当我点击链接时，雪佛龙不起来。

Answer 1

你没有.accordion元素？

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

小提琴

Answer 2

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

我找到了这个

<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 --- //您需要运行引导程序

$('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");

//提琴手视图工作示例