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/

子菜单项不滑动

1 个答案: