使用jQuery toggle()后，如何响应性地隐藏菜单

Question

我创建了一个简单的响应菜单-这里是一个精简版本：Js在此报价

HTML

<a href="javascript:void(0);" onclick="toggleNav()">
<span class="ico"><i class="fa fa-bars hvr-icon"></i></span> Dashboard
</a><ul id="submenu">
<li>Example Menu</li>
<li>Example Menu 2</li>
<li>Example Menu 3</li>
</ul>

JavaScript

function toggleNav() {
$("#submenu").toggle();
}

CSS

#submenu {
display:none;
}

我使用jQuery来切换((显示。

如果我将submenu切换到显示，当屏幕大小使用媒体查询(如：(增加时，我想再次响应地隐藏它(例如，不点击切换按钮(

@media screen and (max-width: 991px) {

但是，任何CSS样式都会被toggle((写入的内联样式覆盖。

有人能提出实现这一目标的方法吗？

谢谢。

Answer 1

您可以始终使用toggleClass而不是使用toggle。通过切换一个类，您可以将该类添加到各种媒体查询中，并根据需要进行样式设置。

.active{dispaly:block;}
function toggleNav() {
$("#submenu").toggleClass("active");
}
@media screen and (max-width: 991px) {
#submenu.active{
display:none !important;
}
}

您可能需要也可能不需要!important

Answer 2

您可以简单地使用JavaScriptmatchMedia来实现这一点，只需查看以下

示例

$(function(){
var win_size = window.matchMedia( "(max-width: 320px)" );
if (win_size.matches) {
$("#submenu").addClass();
} else{
$("#submenu").removeClass();
}
});