Question

我正在寻找一些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>

进入＆＃34;打开＆＃34;该职位，此行<div id="personnel" class="panel-collapse collapse">将更改为<div id="personnel" class="panel-collapse collapse in">。添加＆＃34;在＆＃34;。

在这个位置，使用＆＃34; in＆＃34; <div id="personnel" class="panel-collapse collapse in">我想采用行<span class="pull-right"><i class="fa fa-angle-down"></i></span>（比前者高几行）并将类 fa-angle-down 更改为 fa-angle-up

我怎样才能做到这一点？

感谢。

Answer 1

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

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")对象，就会触发此代码。

但是，如果您要添加该类，IMO更好的方法是将该类添加到$(".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，那么，IMO最好添加代码来改变类（从fa-angle-down到fa-angle-up，反之亦然）在任何事件/任何函数中调用您正在使用将“in”类添加到$("#personnel")对象。

Answer 2

在您的示例中，我假设您使用Bootstrap's Collapse插件{。}}。

如果是这种情况，也许您可以尝试挂钩Collapse的{{1}}和shown.bs.collapse事件并在那里进行操作（翻转箭头图标）。

例如：

hidden.bs.collapse

现场演示：Font Awesome（http://jsfiddle.net/pUam7/show/）

jQuery基于折叠位置翻转箭头图标

2 个答案: