子菜单项不滑动

Question

我正在开发一个 wordpress 主题，我目前正在设置菜单以使其具有响应性。所以我在下面设置了 jQuery。问题是当菜单项向下滑动时，子菜单项不会，它们只是在顶级项向下滑动后弹出。如何让子菜单项像顶级项一样向下滑动？

FIDDLE

var menu_expanded = false;


jQuery(document).ready(function () {
    console.log("hi");
    jQuery('header .menu .current-menu-item').click(function (e) {
        e.preventDefault();
        if (menu_expanded == false) {
            jQuery('header .menu li').slideDown();
            menu_expanded = true;
        } else if (menu_expanded == true) {
            jQuery('header .menu li:not(.current-menu-item)').slideUp();
            menu_expanded = false;
        }
    });
});

Answer 1

一个选项是不隐藏子菜单li 元素，因此您可以从内部菜单项中删除display: none。之后，您需要对li 项目header .menu > li 使用直接子选择器：

jQuery('header .menu .current-menu-item').click(function (e) {
    e.preventDefault();
    if (menu_expanded == false) {
        jQuery('header .menu > li').slideDown();
        menu_expanded = true;
    } else if (menu_expanded == true) {
        jQuery('header .menu > li:not(.current-menu-item)').slideUp();
        menu_expanded = false;
    }
});

演示： http://jsfiddle.net/36ejp1h4/3/

另一种选择是将slideDown子菜单项与主项分开，slideDown回调：

jQuery('header .menu > li').slideDown(function() {
    $(this).find('ul > li').slideDown();
});

演示： http://jsfiddle.net/36ejp1h4/6/