Question

我有一个带有图标的菜单，当菜单打开/关闭时，这些图标会更改。问题是，当我单击其他菜单时，我希望以前的图标变回其关闭状态。

例如，您打开一个子菜单，并且插入符号下移更改为插入符号上移。您按相同的菜单，插入标记现在处于插入标记向下状态。当您按下另一个子菜单时，即使我可以关闭整个先前打开的子菜单，我也无法将以前的该图标改回插入符号。

这是我正在处理的代码：

toggleSubmenuIcon = function() {

var submenuIcons = $("a.dropdown-toggle > i"); //i element with the icon

//click the anchor
$("a.dropdown-toggle").click( function () {
    $(this).find("i").toggleClass("fa-chevron-up fa-chevron-down");
    closeIcons();
});
function closeIcons() {
    var icons = $("a.dropdown-toggle > i");
    var content = $("#menuMain > li.dropdown");

    icons.each(function () {
        if (!content.hasClass("open")) {
           $(this).toggleClass("fa-chevron-up fa-chevron-down");
            }
        });
    }
};

Answer 1

假设您的HTML标记如下所示：

<a class='dropdown-toggle' data-toggle='#dropdown-1'><i class='fa fa-chevron-up'>Toggle 1</i></a>
<a class='dropdown-toggle' data-toggle='#dropdown-2'><i class='fa fa-chevron-up'>Toggle 2</i></a>
<a class='dropdown-toggle' data-toggle='#dropdown-3'><i class='fa fa-chevron-up'>Toggle 3</i></a>

<div class='dropdown' id='dropdown-1'>
  <div>Option 1</div>
  <div>Option 2</div>
  <div>Option 3</div>
</div>

<div class='dropdown' id='dropdown-2'>
  <div>Option 1</div>
  <div>Option 2</div>
  <div>Option 3</div>
</div>

<div class='dropdown' id='dropdown-3'>
  <div>Option 1</div>
  <div>Option 2</div>
  <div>Option 3</div>
</div>

您只需在点击的a的{{1}}子级上切换类，然后从其他i元素中删除fa-chevron-down类，然后添加{{ 1}}类。我只是重新编写了一下，但是这是我想到的（我添加了一个i函数，但是您可以对其进行调整，以使用已经用于隐藏或显示相应下拉菜单的任何方法）

fa-chevron-up

这是小提琴：http://jsfiddle.net/8yakhodm/

使用jQuery打开/关闭子菜单时切换菜单图标

1 个答案: