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”class：

    *.hidden {
      display: none;
    }

因此它将作为导航栏上的切换，但由于我只在屏幕尺寸小于600px时使用此功能，我希望它仅在屏幕为599px或更低时默认为.hidden， AND默认仅在尺寸为600px或更大时显示。

如果有更简单的方法，或者我需要一个插件，我会很感激任何有用的回复。

我不想使用任何引导程序或其他框架 - 最好是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'); }

Answer 2

我刚刚找到了一种方法，但我宁愿不使用两个单独的按钮。

    <span class="float-right">
        <a href="#" id="toggleNavShow"><i class="fa fa-bars"></i></a>
        <a href="#" id="toggleNavHide" class="hidden"><i class="fa 
        fa-bars"></i></a>
    </span>

重复的js ......

    $(document).ready(function(){
      $("#toggleNavShow").click(function(){
        $("#nav").show();
        $("#toggleNavShow").hide();
        $("#toggleNavHide").show();
      });
      $("#toggleNavHide").click(function(){
        $("#nav").hide();
        $("#toggleNavShow").show();
        $("#toggleNavHide").hide();
      });
   });

如果有一种方法可以使用一个按钮我很想知道...我不是那些经历过js的人。

非Bootstrap可折叠导航栏

2 个答案: