动画图标不会在切换点击时占据他的原始位置

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

我发现您的代码存在 2 个问题。第一个建议是不要在 $(document).ready() 中包含 $(function() { // your code })。 $(function() {}) 实际上只是 $(document).ready() 的简写，因此您正在添加不需要的代码。

第二个是你的逻辑问题。
$('#mw_nav .toggle') 和$('#m_nav .toggle') 点击监听器本质上是在同一个元素上添加一个点击监听器，但两者运行的逻辑不同。当$('#mw_nav .toggle') click listener 被调用时，它会检查一个类是否存在来决定它需要删除和添加哪个类。当$('#m_nav .toggle')点击监听器被调用时，它调用当前嵌套<ul>上的slideToggle函数，不管另一个菜单是打开还是关闭，并且没有检查是否存在rotate_open/rotate_close类允许类得到交换。 rotate_open/rotate_close 类的交换和slideToggles <ul> up/down 的逻辑没有关系。

更新

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

我已将.top_level 类添加到您HTML 的顶级项目中。我用它作为区分顶级<li> 和子菜单的一种方式。接下来，在单击事件侦听器结束时，我检查单击的 .toggle 元素是否是顶级元素，如果是，我将所有不是当前选定的顶级元素作为目标，并确保它们具有 .rotate_close班级。

$(function() {}) shorthand reference

Answer 2

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

$('#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。

干杯！