FIDDLE

Question

我有一个手风琴菜单，每个父菜单都有一个图标，这个图标用css过渡和转换动画。我在click事件中添加了一个带if条件的类。问题是，当我在Menu1上单击时，图标动画效果很好，但如果我直接在Menu2上单击，则会出现menu2下拉菜单，但menu1中的图标不会显示原来的位置。这个问题适用于每个菜单/子菜单中的每个图标，我认为我的代码中有错误。

$(document).ready(function() {
    // Icons effect
    $('#mw_nav .toggle').click(function() { 
        if($(this).hasClass('rotate_close')) 
        {
            $(this).addClass('rotate_open').removeClass('rotate_close');
        }
        else {
            $(this).addClass('rotate_close').removeClass('rotate_open');
        }
    });
    // Toggle Menu Items
    $(function () {
        $("#m_nav > ul ul").hide(); 
        $('#m_nav .toggle').click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            var $parentli = $(this).closest('li');
            $parentli.siblings('li').find('ul:visible').slideToggle(400);
            $parentli.find('> ul').stop().slideToggle(400);
            $(this).remove;
       });
    });
});

FIDDLE

任何帮助将不胜感激

Answer 1

在第一个点击处理程序中使用此代码：

$('#mw_nav .toggle').click(function() { 

   $(this).toggleClass('rotate_close rotate_open');

   if ($('#mw_nav .toggle').not(this).hasClass('rotate_open')) {

      $('#mw_nav .toggle').not(this).removeClass('rotate_open').addClass('rotate_close');

    }

});

我已使用一个有效的示例更新了您的FIDDLE。

干杯！

Answer 2

我在代码中看到了两个问题。第一个建议是在$（document）.ready（）中没有$（function（）{//你的代码}）。 $（function（）{}）实际上只是$（document）.ready（）的简写，所以你要添加你不需要的代码。

第二个是你的逻辑问题 $('#mw_nav .toggle')和$('#m_nav .toggle')点击侦听器实质上是在同一个元素上添加一个点击侦听器，但两者都运行不同的逻辑。当调用$('#mw_nav .toggle')单击侦听器时，它会检查是否存在一个类，以确定需要删除和添加的类。当$('#m_nav .toggle')点击监听器被调用时，它调用当前嵌套<ul>上的slideToggle函数，无论是否打开或关闭了另一个菜单，并且没有检查rotate_open / rotate_close类是否存在允许类交换。交换rotate_open / rotate_close类与slideToggles <ul>向上/向下的逻辑之间没有关系。

<强>更新

我已经编辑了您的代码并进行了更新，现在可以在此处查看：https://jsfiddle.net/vhfn0q5a/9/

我在HTML中的顶级项目中添加了一类.top_level。我使用它作为区分顶级<li>和子菜单的方法。接下来，在click事件监听器的末尾，我检查点击的.toggle元素是否是顶级元素，如果是，我将所有顶级元素作为目标，并确保它们具有{ {1}}课程。

$(function() {}) shorthand reference

Animate图标在切换点击时不会占据原始位置

FIDDLE

2 个答案: