在展开/折叠时更改手风琴标题会更改多个范围

Question

我试图让手风琴标题中的文字在展开和折叠时更改。 它有效，除非我在里面有另一个手风琴，然后它在折叠时都会改变。 http://jsfiddle.net/mwvuH/3/

$(document).ready(function() {
  $(".accordion-body").on("show",function(event){
    $('span', $(this).prev()).text('-');
  });
  $(".accordion-body").on("hide",function(event){
    $('span', $(this)).text('+');
  });
});

HTML

<div class="accordion-heading">
    <div class="accordion-toggle" data-toggle="collapse" href="#collapseFive">
        Title
        <a href="#collapseFive"><span class="pull-right">+</span></a>
    </div>
  </div>
  <div id="collapseFive" class="accordion-body collapse out">
    <div class="accordion-inner">
      Inside
      <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" href="#collapseSix">
            Inside Title
            <a href="#collapseSix"><span class="pull-right">+</span></a>
        </div>
      </div>
      <div id="collapseSix" class="accordion-body collapse out">
        <div class="accordion-inner">
            Inside Inside
        </div>
      </div>
    </div>
  </div>

Answer 1

这是因为儿童上的点击事件会冒泡并触发父母的点击事件。所以停止传播事件并尝试这种方式。

$(document).ready(function() {
  $(".accordion-body").on("show",function(event){
      event.stopPropagation();
     $('span', $(this).siblings('.accordion-heading')).text('-');
  });
  $(".accordion-body").on("hide",function(event){
      event.stopPropagation();
    $('span', $(this).siblings('.accordion-heading')).text('+');
  });
});

Fiddle

顺便说一句，如果你只使用事件切换文本，你可以将它们合并为一个。

$(document).ready(function() {
  $(".accordion-body").on("show hide",function(event){
      event.stopPropagation();

      $('span', $(this).siblings('.accordion-heading')).text(function(){
          return this.innerHTML === '+' ? '-' : '+';
      });
  });

});

Fiddle