响应式 CSS /java 脚本 DIV - 仅在移动查询上单击时显示

Question

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

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

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

});

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

Answer 1

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

JS：

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

CSS：

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

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

希望对你有帮助。