Question

我尝试使用bootstrap为我的手风琴制作icon vvron：

我有这个：

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

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

img chevron

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');
});

FIDDLE

Answer 2

我已经在很多地方寻找过这个答案（SIMPLE）

我发现了这个

<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");

// fiddler view working example

用手风琴自举向上和向下的图标

2 个答案: