Javascript jQuery根据折叠位置翻转箭头图标

我正在寻找一些jQuery，它可以根据折叠状态的位置将我的箭头图标从下向上翻转

<div class="panel panel-default">
  <div class="panel-heading customize">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#personnel-menu" href="#personnel">
        Personnel
        <span class="pull-right"><i class="fa fa-angle-down"></i></span>
      </a>
    </h4>
  </div>
  <div id="personnel" class="panel-collapse collapse">
    <div class="panel-body">
      <ul class="list-unstyled stripped">
        <li><a href="#">Users</a></li>
      </ul>
    </div>
  </div>
</div>

当处于“打开”位置时，此行

将变为

。加上“in”

在这个位置上，使用“in”

，我想取一行

（前一行上方的几行），并将类fa角度向下更改为fa角度向上

我怎样才能做到这一点

---

谢谢。

执行此操作的代码非常简单：

var elem = $("#personnel");

if (elem.hasClass("in")) {
    elem.parents(".panel").first().find(".fa-angle-down")
        .removeClass("fa-angle-down")
        .addClass("fa-angle-up");
}
else {
    elem.parents(".panel").first().find(".fa-angle-up")
        .removeClass("fa-angle-up")
        .addClass("fa-angle-down");
}

每当您想将“in”类添加到

$（“#personel”）

对象时，都会触发此代码

但是，如果您仍要添加该类，我认为更好的方法是将该类添加到

$（“.panel”）

div中，然后CSS将为您处理更改，例如：

.panel .panel-heading .panel-title a i.fa {
    background-color: red;
}
.panel.in .panel-heading .panel-title a i.fa {
    background-color: blue;
}

---

即使您确实想使用javascript，在我看来，最好添加代码来更改类（从

fa-angle-down

到

fa-angle-up

，反之亦然），无论您使用什么事件/函数调用来将“in”类添加到

$（“#personal”）

对象，我假设你正在使用插件

如果是这种情况，也许您可以尝试挂接到

折叠

的

显示的.bs.Collapse

和

隐藏的.bs.Collapse

事件，并在那里进行操作（翻转箭头图标）

例如：

$('#personnel-menu').on('hidden.bs.collapse', function (event) {      
  var arrow = $('#' + event.target.id).parent().find('i');    
  arrow.removeClass('fa-angle-down');
  arrow.addClass('fa-angle-up');
}).on('shown.bs.collapse', function (event) {
  var arrow = $('#' + event.target.id).parent().find('i');        
  arrow.removeClass('fa-angle-up');
  arrow.addClass('fa-angle-down');
});

---

现场演示：（）

为什么不直接使用CSS呢？！太好了，谢谢！你在两个假设上都是正确的——BS和FA