Javascript 非自举可折叠导航条

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

因此，它将充当导航栏上的切换，但由于我仅在屏幕大小小于600px时才启用此选项，因此我希望它仅在屏幕大小为599px或更小时默认为.hidden，并且仅在屏幕大小为600px或更大时默认为显示

如果有更简单的方法，或者我需要一个插件，我将非常感谢任何有帮助的回复

我不想使用任何引导或其他框架——最好是CSS或javascript，也许还有jQuery

---

谢谢

您可以通过css媒体查询来执行此操作，如下所示：

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

将该类添加到元素中，这样即使.hidden类消失，如果屏幕大小小于600，.smhidden类仍将隐藏该元素

编辑

您可以通过JavaScript使用以下命令设置默认值：

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

var windowWidth=window.innerWidth；
如果（窗宽<600）{
$（'#nav'）.addClass（'hidden'）；
} 

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

    <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不是很有经验。

但是使用按钮切换部分怎么样？谢谢你解决了屏幕大小的问题：）哦，对不起，我部分误读了这个问题。我想如果屏幕很小的话，默认情况下永远不会显示。我会编辑答案以包含正确的解决方案。我只是找到了一种方法，但是如果你的编辑更简单，那么谢谢，如果没有-没关系，谢谢你尝试确定。我的编辑只包括，如果js检测到您的窗口大小小于600，nav默认为隐藏。否则，它一开始就没有隐藏类。

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

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

    <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>

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