实现固定侧边栏关闭 [英] Materialize fixed-sidebar close

问题描述

我有一个Materialize固定的sidenav，它始终可见.我要添加一个按钮，它将打开和关闭它.

I have a Materialize fixed sidenav which is visible all time. I want to add button which will open and close it.

如果在按钮上添加$('.sidenav').sidenav('close')，则只能关闭侧边栏；与$('.sidenav').sidenav('open')类似.

If I add $('.sidenav').sidenav('close') to the button it can only close the sidebar; similarly with $('.sidenav').sidenav('open').

我不想打两个按钮.我该如何解决?

I do not want make two buttons. How can I solve this?

此功能可初始化侧边栏:

This is function which intializes the sidebar:

$(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">[e-mail]</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>

我有一个类别为.sidenav-close的按钮，该按钮不起作用(默认).我认为这是因为我的侧边栏是固定的.

I have a button with class .sidenav-close which is not working (it is default). I think it is because my sidebar is fixed.

是否有任何默认方法可以打开和关闭它?

Are there any default methods to open and close it?

这是我的按钮，需要打开/关闭它:

This is my button which needs to open/close it:

<a href="#!" data-target="slide-out" class="sidenav-trigger rb_nav_btn">
  <i class="material-icons">menu</i>
</a>

我考虑过编写一个函数，该函数将检查边栏是否打开，然后在click上将其关闭，反之亦然.

I thought about writing a function which will check if the sidebar is open then close it on click and the other way round.

推荐答案

固定导航栏并非要关闭 ......其唯一含义是提供一种实现始终可见的快速方法导航栏.因此，您的要求基本上是在初始化后立即打开一个简单的导航栏...简单导航栏和固定导航栏之间的唯一区别是后者开始打开.

The fixed navbar is not meant to be closed... Its only meaning is to provide a fast way to implement an always visible navbar. So what you're asking is basically to have a simple navbar open right after initialized... The only difference between the simple and the fixed navbar is that the latter starts open.

顺便说一句，您以为可以使用文档中所述的属性instance.isOpen >以检查是否打开了sidenav.如果是，则将其关闭，否则将其打开.我使用了浮动按钮，并注释了sidenav的默认触发器，因为它的功能已由浮动按钮取代.

Btw, as you thought you could use the property instance.isOpen as said in the Docs to check if the sidenav is open. If yes close it, else open it. I used the floating button and commented the default trigger for the sidenav since its function is replaced by the floating button.

注意:要查看实际效果，您需要运行代码段并点击 FULL PAGE (完整页面)链接，否则您将不会看到导航栏，并且必须手动将其打开.这是因为查看代码似乎表明，如果窗口的宽度小于< Sidenav，Sidenav会自行关闭. 992:

NOTE: In order to see it in action you need to Run the code snippet and click the FULL PAGE link, otherwise you won't see the navbar and you'll have to open it manually. This because looking at the code seems that Sidenav closes itself if the width of the window is < 992:

来源:materialize.js (第5834行)

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

---

这是您的脚本:

---

Here is your script:

document.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".sidenav");
  var options = {};
  var instances = M.Sidenav.init(elems, options);

  document
    .querySelector("#toggle_sidenav")
    .addEventListener("click", function() {
      var elem = document.querySelector(".sidenav");
      var instance = M.Sidenav.getInstance(elem);

      if (instance.isOpen) {
        console.log("Is open: I need to close it");
        instance.close();
      } else {
        console.log("Is closed: I need to open it");
        instance.open();
      }
    });
});

header, main, footer {
  padding-left: 300px;
}

@media only screen and (max-width: 992px) {
  header,  main, footer {
    padding-left: 0;
  }
}

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul id="slide-out" class="sidenav sidenav-fixed">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
</ul>
<!-- <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a> -->

<div style='position: absolute; bottom:10px; right:10px'>
  <a id="toggle_sidenav" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>

这篇关于实现固定侧边栏关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！