MaterializeCSS導航欄按鈕不觸發側導航

我有一個側面導航下面的代碼：MaterializeCSS導航欄按鈕不觸發側導航

<ul id="slide-out" class="side-nav"> 
    <li><a class="subheader">Last Updated:</a></li> 
    <li><a>Text Here</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> 
</ul>

我也有下面的頭代碼：

<header> 
    <div class="navbar-fixed"> 
     <nav> 
      <div class="nav-wrapper blue darken-1"> 
       <a class="brand-logo center" href="#">Website Name</a> 
    <ul class="right"> 
    <li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li> 
    </ul> 
      </div> 
     </nav> 
    </div> 
</header>

那麼，爲什麼是菜單項不在我的導航欄中出現，爲什麼它不會觸發側邊導航？

而且，如果我刪除button-collapse類，我能看到的菜單，但單擊它不會觸發side-nav

Here是我的jsfiddle

編輯：我的問題是沒有圖標，這是點擊菜單圖標/文本不會激活側面導航菜單的事實。

我如何在移動側導航工作和桌面

來源

2016-12-08 Bijan

這撥弄工作正常，我在移動，菜單按鈕在右邊，只是說菜單，而不是一個漢堡，但它的功能 –

@ darryn.ten：嗯你是對的，它適用於移動，但不是桌面。我如何使它在桌面上工作？ – Bijan

我想你不包括材料圖標的CSS樣式表，這就是爲什麼它顯示的是文本而不是漢堡。當我將這一行添加到您的小提琴中時，對我而言，一切看起來都很不錯。 –

類button-collapse被設置在CSS display:none由於以下桌面：

@media only screen and (min-width: 993px) 
nav a.button-collapse { 
    display: none; 
}

不知道它的原因。

但是，您可以使用除button-collapse之外的其他類，它將起作用。

HTML：

<header> 
      <div class="navbar-fixed"> 
       <nav> 
        <div class="nav-wrapper blue darken-1"> 
         <a class="brand-logo center" href="#">Website Name</a> 
      <ul class="right"> 
      <li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li> 
      </ul> 
        </div> 
       </nav> 
      </div> 
</header>

JS：

(function($){ 
    $(function(){ 

    $('.my-btn').sideNav({ 
     edge: 'left', // Choose the horizontal origin 
     closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor 
     draggable: true // Choose whether you can drag to open on touch screens 
    } 
    ); 

    }); // end of document ready 
})(jQuery); // end of jQuery name space

小提琴：https://jsfiddle.net/6hfrw33n/

來源

2016-12-08 07:04:52

-1

加入這一行，你的JS文件$（「按鈕崩潰。」）sideNav（）。

來源

2016-12-08 06:35:35

MaterializeCSS導航欄按鈕不觸發側導航

回答

相關問題