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

Responsive menu script ignores the submenu?

本文关键字：菜单 脚本 响应      更新时间：2023-09-26

我有一个脚本为响应菜单切换高度:

       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');  
            }  
        });

问题是嵌套无序列表的高度没有被考虑在内，它只是"突然"出现，破坏了效果。HTML标记应该是:

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

你可以在http://www.windycitydigital.net/iconvert上看到它的直播。有人知道我该如何防止嵌套的UL破坏切换动画并使其成为一个流畅的过渡吗?

这里有几件事可能是有用的:

对于菜单的选择器它会选择顶层的ul以及所有的子导航ul。

尝试将选择器更改为:

menu = jQuery('nav > ul')

这个选择器将只选择nav元素的直接子元素，并防止在子导航上触发slideToggle函数，子导航看起来在你的CSS中包含一个显示块，由以下选择器样式:

#navigation ul ul

Slidetoggle会用你当前使用的选择器将它切换为display: none

我也强烈考虑改变你的选择器，使它更干净，更精确:

#navigation > ul

将只选择导航元素的直接子元素。使用这个选择器而不是#navigation ul可以让你使用更少的CSS，因为你不必通过使用更通用的#navigation ul选择器来覆盖你为子导航元素应用的样式(正如你所看到的，它会影响#navigation中的每个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> ul {display: none}，否则上面提到的subnav隐藏的问题将继续存在…

相关文章：