javascript - 非引导可折叠导航栏

Question

我正在尝试设置我的代码，以便在我单击 ID 为“#toggleNav”的链接时

    <a href="#" id="toggleNav"><i class="fa fa-bars"></i></a>

它将添加或删除 id 为“#nav”的元素的“.hidden”类

    <ul class="navbar navCollapse" id="nav">
      <span class="links">
        <a href="#">
          <li>Home</li>
        </a>
    ...

“隐藏”类:

    *.hidden {
      display: none;
    }

这样它将作为导航栏上的切换按钮，但由于我只有在屏幕尺寸小于 600 像素时才会打开它，所以我希望它仅在屏幕为 599 像素或更小时默认为 .hidden，并且默认仅在尺寸为 600 像素或更大时显示。

如果有更简单的方法，或者我需要一个插件，我将不胜感激任何有帮助的回复。

而且我不想使用任何 Bootstrap 或其他框架 - 最好只使用 CSS 或 javascript，也许还有 jQuery。

谢谢!

Answer 1

你可以通过 css 媒体查询来做到这一点，像这样:

@media (max-width: 600px) {
  *.smhidden {
    display: none;
  }
}

将此类添加到您的元素，这样即使 .hidden 类消失了，如果屏幕尺寸小于 600，.smhidden 类仍将隐藏该元素。

编辑

您可以通过 JavaScript 设置默认值:

var windowWidth = window.innerWidth;
if (windowWidth < 600) {
    $('#nav').addClass('hidden');
}