Question

我有一个可折叠的菜单，我想在点击显示或隐藏内容时更改箭头的方向。我正在使用Font Awesome图标作为我的箭头。这是一个非常基本的折叠菜单HTML：

<div class="panel-group" id="accordion">
  <div class="panel">
    <div class="panel-heading">
        <h6>
            <a id="menu-one-collapse" data-toggle="collapse" data-parent="#accordion" href="#menuOne">
                BUDGET <i class="fa fa-arrow-right"></i>
            </a>
        </h6>
    </div>

    <div id="menuOne">
        <div class="panel-body">
            CONTENT HERE.
        </div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-heading">
        <h6>
            <a id="menu-two-collapse" data-toggle="collapse" data-parent="#accordion" href="#menuTwo">
                CATEGORY <i class="fa fa-arrow-right"></i>
            </a>
        </h6>
    </div>

    <div id="menuTwo">
        <div class="panel-body">
            CONTENT HERE TOO.
        </div>
    </div>
  </div>
</div>

所以基本上我想在打开菜单时将fa-arrow-right改为fa-arrow-down，反之亦然。

编辑：

所以我设法用toggleClass更改箭头方向，但是当我点击一个菜单时，第二个菜单的箭头也会改变...即使我给了他们不同的ID并将他们的jQuery分开。我编辑了HTML代码，我将在下面添加我的JS：

$(document).ready(function(){
    $('#menu-one-collapse').click(function () {
        $("i").toggleClass("fa-arrow-down");
    });

    $('#menu-two-collapse').click(function () {
        $("i").toggleClass("fa-arrow-down");
    });
});

Answer 1

尝试以下方法。 jQuery toggleClass()可以解决问题。

$(document).ready(function(){
    $('#budget-collapse').click(function(){
        $child=$(this).children('i');
        $child.toggleClass("fa-arrow-right").toggleClass("fa-arrow-down");
    });
});

注意：不要忘记在head部分

中包含jQuery库

更改可折叠菜单中的箭头方向？

1 个答案: