Question

我有手风琴，我使用“向上”和“向下”箭头，它工作正常但是，当我再次点击面板标题箭头不会改变。

解释：

在这个例子中，我用“A”和“B”代替“向上”和“向下”箭头，当页面加载所有面板标题显示“A”时，点击面板标题“A”后更改为“B”但再次单击“B”则不会更改为“A”。

$('#leftMenu .panel-title a').click(function(){
  $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened'); 
  $(this).parent('.panel-title').addClass('accordion-opened');
});

JSFiddle Here

Answer 1

请检查此updated fiddle

第二次点击时，无需添加'accordion-opened'课程。

Answer 2

您可以自己添加类，然后根据

添加和删除accordion-opened类

$('#leftMenu .panel-title a').click(function() {
  $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened');
  if ($(this).hasClass('opened')) {
    $(this).removeClass('opened');
    $(this).parent('.panel-title').removeClass('accordion-opened');
  } else {
    $(this).addClass('opened');
    $(this).parent('.panel-title').addClass('accordion-opened');
  }
});

#leftMenu .accordion-toggle:after {
  font-family: 'FontAwesome';
  content: "A";
  float: right;
}
#leftMenu .accordion-opened .accordion-toggle:after {
  content: "B";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="leftMenu" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
								<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#tab-1">Issue Type</a>
							</h4>
    </div>
    <div id="tab-1" class="panel-collapse collapse">
      <div class="panel-body">
        <h1>Issue Type</h1>
      </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="#leftMenu"  href="#tab-2">Program Description</a>
							</h4>
    </div>
    <div id="tab-2" class="panel-collapse collapse">
      <div class="panel-body">
        <h1>Program Description</h1>
      </div>
    </div>
  </div>
</div>
<!--/#leftMenu-->

Answer 3

此解决方案可行。 Updated fiddle

修改你的JS以跳过当前/点击的那个。

$('#leftMenu .panel-title a').click(function() {
  $('#leftMenu .panel-title').not($(this).parent('.panel-title')).removeClass('accordion-opened');
  $(this).parent('.panel-title').toggleClass('accordion-opened');
});

注意：

Aneesh Sivaraman 的解决方案失败了。检查：

点击第二支手风琴（Program Description）一次。
现在点击第一支手风琴（Issue Type） - 它仍显示 A

点击手风琴两次箭头位置不会改变

3 个答案: