1

アコーディオンのタイトルを展開したり折りたたんだりしたときにテキストを変更しようとしています。内部に別のアコーディオンがある場合を除いて機能し、折りたたむと両方が変化します。 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>
4

1 に答える 1

2

これは、子のクリック イベントがバブルアップし、親のクリック イベントもトリガーするためです。したがって、イベントの伝播を停止して、この方法を試してください。

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

フィドル

ところで、テキストを切り替えるためだけにイベントを使用している場合は、それらを 1 つに組み合わせることができます。

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

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

});

フィドル

于 2013-05-28T17:31:39.917 に答える