Javascript HTML/CSS导航下拉列表和子下拉列表在网站响应时不显示

当网站响应时，导航栏出现问题。 单击下拉菜单时，div似乎消失。不确定这是否与CSS或jQuery有关

此处演示：

---

HTMl（所有li类都是由WordPress生成的，对不起）

Jquery

    $(function() {
        var pull        = $('#pull');
            menu        = $('nav');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

---

正如@Moob所说，

menu.slideToggle（）#pull

元素时，code>隐藏了整个导航元素

要获得想要的效果，请执行此操作

menu = $('nav .menu');

更新

当屏幕大小调整到小于或等于320px时，将显示您的菜单项，因为您的代码中有此css规则

@media only screen and (max-width : 320px) {

    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }

}

在

320px

和

600px

之间，您的菜单项被

nav#pull

元素覆盖，因为您使它成为

display:block

，所以将它转到

display:inline block

，它会正常工作

---

菜单。滑动切换（）#pull

时，code>将隐藏整个

nav

元素。将在匹配元素的“显示”和“隐藏”之间切换谢谢，它的下拉列表现在已显示，但没有任何选项卡显示，因为它因某种原因被菜单覆盖。您将屏幕大小限制为一定宽度，以使菜单项以响应方式显示，将窗口大小调整为

300px

，它将显示菜单项。您必须使用css媒体查询来显示所需的最小屏幕宽度

menu = $('nav .menu');

@media only screen and (max-width : 320px) {

    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }

}