Question

我正在使用jQuery slideToggle功能和媒体查询。

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

如果我没有点击切换链接，并将窗口调整为大尺寸，则可以正常工作。

演示以查看问题：

请在此处查看演示，您可以在哪里看到问题： 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);
});

Answer 1

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

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

DEMO

Answer 2

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

<强> 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 {

jQuery Toggle在窗口大小调整时不会显示

2 个答案: