2

我正在使用 jQuery slideToggle 函数和媒体查询。

问题是当我将窗口调整为小尺寸时，会出现切换链接。现在，如果我单击切换，它可以正常工作，但是当我将窗口调整回大尺寸时，隐藏的元素仍然没有出现。

如果我不单击切换链接，并将窗口大小调整回大尺寸，它可以正常工作。

Demo看问题：

请在此处查看演示，您可以在其中看到问题：http: //jsfiddle.net/3Jj7J/

将窗口大小调整为您看到“主菜单”链接的小尺寸。当你点击它时，你会看到切换。现在，如果您将其重新调整为大尺寸，正常的链接仍然不会出现。

这是我的代码：

HTML：

<div class="bar">
    <a class="toggle" href="#">MAIN MENU</a>
</div>

<div class="nav">
    <div class="wrap">
        <ul>
            <li>Link 1</li>
             <li>Link 2</li>
        </ul>
    </div>
</div>

CSS：

.bar{
    display: none;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
     .nav ul { 
        display: none;
    }

    .bar{
        display: block;        
    }
}

jQuery：

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});
4

2 回答 2

5

添加窗口调整大小事件处理程序： 

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});  

jQuery(window).on('resize', function(){   
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
         menu.show();   
    }
});

jsFiddle：http: //jsfiddle.net/3Jj7J/1/

更新：这是替代解决方案（只需删除内联display属性，因此它将使用 css 规则）。

jQuery(window).on('resize', function(){     
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
        menu.css({'display':''});   
    }
});

演示

于 2013-09-24T09:10:07.910 回答
1

我已经阅读了您的问题并自己进行了测试。现在，我通过执行以下操作使链接出现：

CSS：

        #bar {
        display: none;
        color: #000000;
        border: 1px solid red;
    }

    @media screen and (max-width: 500px) {
         #nav ul { 
            display: none;
        }

        .bar{
            display: block;        


   }
}

亲眼看看 ( http://jsfiddle.net/hSZ7t/ ) 我所做的是改变了你的 CSS。而不是你使用：

.bar {

下雪了：

#bar {

于 2013-09-24T08:56:25.747 回答