javascript - 在 Twitter Bootstrap Accordion 中选择行

Question

我正在尝试更改 twitter bootstrap Accordion 的折叠链接内的类的样式。但是当我更改样式时，它会更改所有行的样式。我只想选择我点击的那个。

HTML:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <div class="test"></div>Collapsible Group Item #1 
          </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
           <div class="test"></div>Collapsible Group Item #2 
        </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <div class="test"></div>Collapsible Group Item #3 
        </a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

JS:

$('#accordion').on('show.bs.collapse', function () {
  var collapsing = $(this).data("toggle", "collapsing");
  collapsing.find(".test").html("Test");
})

#vacancy_panel 是整个 Accordion 的 id。 a 标签内有一个带有 plus_icon 类的 div。

JSFiddle:http://jsfiddle.net/R6EAW/261/

我只想将单击的行内容的测试类更改为在此 fiddle 中进行测试。

我不想做的是使用行的 id。

Answer 1

如果您可以等待动画结束，您可以使用:

$('#accordion').on('shown.bs.collapse', function () {
  var collapsing = $(this).data("toggle", "collapsing");
  $(".panel-collapse.in").prev().find('.test').html("Test");
})

fiddle :http://jsfiddle.net/R6EAW/262/

更新

如果您绝对需要在折叠操作之前执行它，一种方法是在单击操作上执行它...

fiddle :http://jsfiddle.net/R6EAW/263/

JS:

$('[data-toggle="collapse"]').on('click', function(){
    $heading = $(this).parent().parent();
    $panel = $heading.next();
    if(!$panel.hasClass('in'))
    {
        $heading.find('.test').html("Test");
    }
});