0

我已经在网上到处寻找，试图解决这个问题。我正在制作一个响应移动设备的桌面网站，并且遇到了导航菜单的问题。我已将其设置display:none为移动版本，但我想将其设置为可以通过单击图像或文本来查看。我在其他地方找到的解决方案都只适用于其中只有UL和LI元素的 div 菜单。我的每个“部分”都有H2标签等。我只是希望单击按钮，然后将整个DIV显示在移动查询上，而不会弄乱我的任何 HTML 代码等。

我发现这个 jquery 代码看起来很接近，但它似乎隐藏了桌面上的导航 div。我需要它display:none仅通过 CSS 在媒体查询中设置。

$("#preview").toggle(function() {
    $("#navi").hide();
}, function() {
    $("#navi").show();
});

});

只需单击诸如“单击此处获取菜单”之类的文本即可调用它……也希望它是按钮或链接。

4

1 回答 1

1

尝试$.toggleClass()而不是使用$.hide(). 这样媒体查询 css 将有更多的控制权。以下是仅在小于 700px 的屏幕中隐藏 div 的按钮的示例。

JS：

$("#preview").toggleClass('hideInMobile');

CSS：

@media (max-width: 700px){
    .hideInMobile 
    {
        display:none
    }
}

演示：http: //jsfiddle.net/HZDCW/2/

希望能帮助到你。

于 2013-04-21T01:33:43.120 回答