Question

我有一个用于切换高度的响应式菜单的脚本：

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

            jQuery(pull).on('click', function(e) {  
                e.preventDefault();  
                menu.slideToggle();  
            });  
        }); 
        jQuery(window).resize(function(){  
            var w = jQuery(window).width();  
            if(w > 320 && menu.is(':hidden')) {  
                menu.removeAttr('style');  
            }  
        });

问题是嵌套的无序列表的高度没有被考虑在内，它只是弹出＆＃34;在和废墟效果。 HTML标记将是：

<ul>
    <li></li>
    <li>
        <ul>
        </ul>
    </li>
</ul>

您可以在http://www.windycitydigital.net/iconvert看到它。任何人都知道如何防止嵌套的UL破坏切换动画并使其全部流畅过渡？

Answer 1

这里有几件事可能有用：

使用选择器，您可以选择顶级ul以及任何subnav ul ...

尝试将该选择器更改为：

menu = jQuery('nav > ul')

此选择器将仅选择nav元素的直接子元素，并阻止slideToggle函数在您的子区域ul上触发，该子区域看起来在CSS中包含一个显示块，由以下选择器设置样式：

#navigation ul ul

Slidetoggle将切换显示：none，使用您当前正在使用的选择器。

我也强烈考虑将您的选择器更改为更清洁，更精确：

#navigation > ul

这将选择仅导航元素的直接子项。使用此选择器代替#navigation ul可以减少使用CSS，因为您不必使用更通用的#navigation ul选择器覆盖您已经应用于subnav元素的样式（因为您和＃ 39;见过，影响#navigation中的每个ul。

由于您已将类应用于子nav ul，因此可以使用以下方式直接设置样式：

#navigation .sub-menu

希望这有助于引导您朝着正确的方向前进！

!!编辑（在下面评论后）!!

试试这个JavaScript：

jQuery(function() {  
    var pull        = jQuery('#pull'), 
        menu        = jQuery('.menu', '#navigation');  

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

哦，并确保将#navigation ul {display：none}更改为#navigation＆gt; ul {display：none}，否则上面提到的subnav隐藏的问题将持续存在......

响应式菜单脚本忽略子菜单？

1 个答案: