子菜单项不滑动

Question

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

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/

子菜单项不滑动

Sub-menu items not sliding

wordpress

jquery

slide

submenu