jquery - 在展开/折叠时更改 Accordion 标题更改多个跨度

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

小提琴

顺便说一句，如果您仅将事件用于切换文本，则可以将它们组合为一个。

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

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

});

小提琴