javascript - 使用 jquery 检测物化框架侧导航宽度

Question

我正在尝试检测物化侧导航元素是否打开，我的目标是在检测到侧导航打开时运行一个函数下面的 HTML 标记来自 materilize.css 文档，侧导航只会如果屏幕为移动尺寸，则会出现，一切正常，我只需要检测 size-nav 是否打开。

 <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

我的 jquery 在下面，现在我正在尝试 console.log()，我现在的目标是当我单击侧边导航菜单并打开 console.log 时将启动。

<script>


  $(document).ready(function(){

      $(".button-collapse").sideNav();



     if ($('.side-nav').length > 0) {

        console.log('side nav is open');

      } else {

         console.log('side nav is close');
      }

  });


</script>

但无法让它工作，任何建议都将非常感谢提前感谢!

Answer 1

如文档中提供的，有一些事件可以检测到sidenav的打开和关闭，只需将其添加到如下选项即可

$('.button-collapse').sideNav({
      onOpen: function(el) { console.log('side nav is open');}, // A function to be called when sideNav is opened
      onClose: function(el) { console.log('side nav is close');}, // A function to be called when sideNav is closed
    }
  );