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

jQuery to flip arrow icon based on collapse position

本文关键字：折叠 位置 于折叠 翻转 图标 jQuery      更新时间：2023-09-26

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

当处于"open"位置时，这一行<div id="personnel" class="panel-collapse collapse">将变为<div id="personnel" class="panel-collapse collapse in">。增加了"在"。

在此位置，使用"in"<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。

我怎样才能做到这一点?

谢谢。

从你的例子中，我假设你使用Bootstrap's Collapse插件与Font Awesome。

如果是这样的话，也许您可以尝试连接到Collapse的shown.bs.collapse和hidden.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');
});

实时演示:http://jsfiddle.net/pUam7/show/(源代码)

完成此操作的代码相当简单:

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"类到$("#personnel")对象。

相关文章：