Javascript 实现固定边栏关闭

我有一个固定的sidenav，可以随时看到。我想添加按钮，将打开和关闭它

如果我在按钮中添加

$（'.sidenav'）.sidenav（'close'）

，它只能关闭侧栏；类似地，

$（'.sidenav'）.sidenav（'open'）

我不想做两个按钮。我怎样才能解决这个问题

这是初始化侧栏的函数：

$(document).ready(function () {
  $('.sidenav').sidenav();
});

这是我的HTML：

<ul id="slide-out" class="sidenav sidenav-fixed">
  <li>
    <div class="user-view">
      <div class="background">
        <img src="img/flag.png">
      </div>
      <a href="#user"><img class="circle" src="img/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div>
  </li>
  <div class="nav-wrapper">
    <form>
      <div class="input-field">
        <input id="search" type="search" required>
        <label class="label-icon" for="search"><i class="material-icons">search</i></label>
        <i class="material-icons">close</i>
      </div>
    </form>
  </div>
  <li><a href="#!"><i class="material-icons">account_balance</i>Departments</a></li>
  <li><a href="#!"><i class="material-icons">store</i>Regions</a></li>
  <li><a href="#!"><i class="material-icons">description</i>Districts</a></li>
  <li><a href="#!"><i class="material-icons">panorama</i>Cities</a></li>
  <li><a href="#!"><i class="material-icons">time_to_leave</i>Vehicles</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Subheader</a></li>
  <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  <li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>

---

我想写一个函数来检查侧边栏是否打开，然后点击

关闭它，反之亦然。
固定导航栏是不应该关闭的。。。它的唯一意义是提供一种快速实现始终可见的导航栏的方法。所以你要问的基本上是在初始化之后打开一个简单的导航栏。。。简单导航栏和固定导航栏之间唯一的区别是后者开始打开

顺便说一句，正如您所想，您可以使用中所述的属性
instance.isOpen
来检查sidenav是否打开。如果是，关闭它，否则打开它。我使用了浮动按钮并注释了sidenav的默认触发器，因为它的功能被浮动按钮替换

注意：要查看它的运行情况，您需要运行代码段并单击完整页面链接，否则您将看不到导航栏，您必须手动打开它。这是因为查看代码时，如果窗口宽度<992:

来源：materialize.js（第5834行）


以下是您的脚本：
document.addEventListener（“DOMContentLoaded”，function（））{
var elems=document.querySelectorAll（“.sidenav”）；
var选项={}；
var instances=M.Sidenav.init（元素、选项）；
文件
.querySelector（“切换侧导航”）
.addEventListener（“单击”，函数（）{
var elem=document.querySelector（“.sidenav”）；
var instance=M.Sidenav.getInstance（elem）；
if（instance.isOpen）{
log（“已打开：我需要关闭它”）；
实例close（）；
}否则{
log（“已关闭：我需要打开它”）；
open（）；
}
});
});
header、main、footer{
左侧填充：300px；
}
@仅介质屏幕和（最大宽度：992px）{
页眉、主页眉、页脚{
左侧填充：0；
}
}





添加
固定导航栏不意味着关闭。。。它的唯一意义是提供一种快速实现始终可见的导航栏的方法。所以你要问的基本上是在初始化之后打开一个简单的导航栏。。。简单导航栏和固定导航栏之间唯一的区别是后者开始打开

顺便说一句，正如您所想，您可以使用中所述的属性
instance.isOpen
来检查sidenav是否打开。如果是，关闭它，否则打开它。我使用了浮动按钮并注释了sidenav的默认触发器，因为它的功能被浮动按钮替换

注意：要查看它的运行情况，您需要运行代码段并单击完整页面链接，否则您将看不到导航栏，您必须手动打开它。这是因为查看代码时，如果窗口宽度<992:

来源：materialize.js（第5834行）


以下是您的脚本：
document.addEventListener（“DOMContentLoaded”，function（））{
var elems=document.querySelectorAll（“.sidenav”）；
var选项={}；
var instances=M.Sidenav.init（元素、选项）；
文件
.querySelector（“切换侧导航”）
.addEventListener（“单击”，函数（）{
var elem=document.querySelector（“.sidenav”）；
var instance=M.Sidenav.getInstance（elem）；
if（instance.isOpen）{
log（“已打开：我需要关闭它”）；
实例close（）；
}否则{
log（“已关闭：我需要打开它”）；
open（）；
}
});
});
header、main、footer{
左侧填充：300px；
}
@仅介质屏幕和（最大宽度：992px）{
页眉、主页眉、页脚{
左侧填充：0；
}
}





添加
其中有一些无效的HTML-一个
元素只能将
元素作为直接子元素<代码>..
应该用
包装。我知道。只需输入一点旧代码，但它仍然不起作用。您在其中有一些无效的HTML-
元素只能将
元素作为直接子元素<代码>..
应该用
包装。我知道。只是放了一点旧代码，但仍然不起作用
<a href="#!" data-target="slide-out" class="sidenav-trigger rb_nav_btn">
  <i class="material-icons">menu</i>
</a>

value: function _handleWindowResize() {
  // Only handle horizontal resizes
  if (this.lastWindowWidth !== window.innerWidth) {
    if (window.innerWidth > 992) {
      this.open();
    } else {
      this.close();
    }
  }

  this.lastWindowWidth = window.innerWidth;
  this.lastWindowHeight = window.innerHeight;
}