Материализовать фиксированную боковую панель закрыть

У меня есть фиксированный sidenav Materialize, который виден все время. Я хочу добавить кнопку, которая будет открывать и закрывать его.

Если я добавлю $('.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">[email protected]</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, которая не работает (по умолчанию). Я думаю, это потому, что моя боковая панель исправлена.

Существуют ли какие-либо методы по умолчанию для его открытия и закрытия?

Это моя кнопка, которая должна открыть/закрыть ее:

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

Я подумал о написании функции, которая будет проверять, открыта ли боковая панель, а затем закрывать ее в click и наоборот.


javascript jquery materialize sidenav
person Neewbie    schedule 08.02.2019    source источник
comment
У вас там какой-то неверный HTML — элемент <ul> может иметь только <li> элементов в качестве непосредственных дочерних элементов. <div class="nav-wrapper">...</div> следует завернуть в <li>.   -  person MTCoster    schedule 08.02.2019
comment
Я знаю. Просто поместите немного старый код, но он все еще не работает   -  person Neewbie    schedule 08.02.2019

Ответы (1)


arrow_upward
2
arrow_downward

Фиксированная панель навигации не предназначена для закрытия... Ее единственное значение состоит в том, чтобы обеспечить быстрый способ реализации всегда видимой панели навигации. Итак, вы просите, чтобы простая панель навигации открывалась сразу после инициализации... Единственная разница между простой и фиксированной панелью навигации заключается в том, что последняя начинает открываться.

Кстати, вы думали, что можете использовать свойство instance.isOpen, как указано в Документации для проверьте, открыт ли боковой экран. Если да, закройте его, иначе откройте. Я использовал плавающую кнопку и прокомментировал триггер по умолчанию для sidenav, поскольку его функция заменена плавающей кнопкой.

ПРИМЕЧАНИЕ. Чтобы увидеть его в действии, вам нужно запустить фрагмент кода и щелкнуть ссылку ПОЛНАЯ СТРАНИЦА, в противном случае вы не увидите панель навигации, и у вас будет открыть его вручную. Это потому, что, глядя на код, кажется, что Sidenav закрывается, если ширина окна составляет ‹ 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>

person Luke Savefrogs    schedule 16.02.2019