html - 使用 jQuery toggle() 后如何响应式地隐藏菜单？

Question

我创建了一个简单的响应式菜单 - 这是一个精简版本: JsFiddle Here

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 来切换()显示。

如果我切换子菜单来显示，当使用媒体查询增加屏幕尺寸时，我想再次响应式地隐藏它(例如，不单击切换按钮)，例如:

@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;
   }
}

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