Question

我一直在敲打这个。

我需要有人解释我这是如何运作的。

有这个菜单：

<nav id="main" class="cf">
    <div id="logo">
        <h2>Name</h2>
        <div id="ham">III</div>
    </div>
    <ul class="cf">
        <li><a href="#">One</a></li> 
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

以下是fiddle。

在CSS上，如果视口的宽度低于760px <ul>内的<nav>转到display: none;

使用jQuery，我尝试slideToggle菜单，然后添加一个.nav-expanded类，使其成为display: block;，然后删除inline样式。像这样：

$('#ham').click(function(){
    $('#main ul').slideToggle(400,function(){
        $(this).toggleClass("nav-expanded").css('display','');
    }); 
});

我这样做，所以如果我调整窗口大小，<ul>项目就不会被隐藏这样做的问题是，如果我切换它显示的菜单并立即隐藏。
似乎媒体查询的display: none;是优先级。

但是，我之所以这样做是因为我之前已经这样做了，如果id标签没有<nav>，就不会发生这种情况。

为什么吗

这是完全相同菜单的另一个fiddle，但id代码没有<nav>。

正如您所看到的，它可以正常工作。有人可能会分享一些相关知识吗？谢谢！

Answer 1

我认为这是因为#main ul它比.nav-expanded更重要，当您删除css显示时，此元素会继承#main ul属性。而且，slideToggle已经生成元素display:block。

Answer 2

尝试以下代码。不要改变第二小提琴的CSS。

$('#ham').click(function(){

    $('nav#main ul').slideToggle(400,function(){
        $(this).toggleClass("nav-expanded").css('display','');

    });

});

这是fiddle.

在带有id的导航内的ul上滑动切换不起作用

2 个答案: