物化側面導航鏈接不起作用

Question

我正在使用materializecss制作網絡，但在側面導航上添加的鏈接不起作用，該怎么辦，

當我單擊該鏈接時，左側導航關閉代碼：

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <a href="index.php" class="brand-logo left thin" title="bcgraphixx">Page Title</a>
            <ul class="right hide-on-med-and-down">
                <li><a class="waves-effect" href="index.php">Home</a></li>
                <li><a class="waves-effect" href="about-us.php">About us</a></li>
                <li><a class="waves-effect" href="services.php">Services</a></li>
                <li><a class="waves-effect" href="book.php">booking</a></li>
            </ul>

            <ul class="side-nav" id="mobile-demo">
                <li>
                    <div class="userView">
                        <div class="background">
                            <img src="<?php echo $srcurl; ?>/cover.png">
                        </div>
                        <a href="#!admin"><img class="circle" src="<?php echo $srcurl; ?>/logo.png"></a>
                        <a href="#!bcgraphix" title="bcgraphixTemplate"><span class="black-text name">DIGINEWS</span></a>

                    </div>
                </li>

                <li><a href="##"><center>MENU</center></a></li>
                <li><a class="waves-effect" href="index.php">Home</a></li>
                <li><a class="waves-effect" href="about-us.php">About us</a></li>
                <li><a class="waves-effect" href="services.php">Services</a></li>
                <li><a class="waves-effect" href="book.php">booking</a></li>
            </ul>

            <script>  $(".button-collapse").sideNav(); </script>
        </div>

    </nav>
</div>

Answer 1

1. 在documentReady事件中包裝sideNav的JS代碼，並將參數closeOnClick設置為true 。

2. 將側邊菜單（類為“ side-nav”的ul元素）帶入與navbar-fixed類相同的div級別。 這是為了避免重疊的已知問題。 查看此stackoverflow問題和可接受的答案

 $( document ).ready(function(){ $('.button-collapse').sideNav({ closeOnClick: true } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <div class="navbar-fixed"> <nav> <div class="nav-wrapper"> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> <a href="#" class="brand-logo right thin" title="bcgraphixx">Page Title</a> <ul class="right hide-on-med-and-down"> <li><a class="waves-effect" href="#">Home</a></li> <li><a class="waves-effect" href="#">About us</a></li> </ul> </div> </nav> </div> <ul class="side-nav" id="mobile-demo"> <li><a href="##"><center>MENU</center></a></li> <li><a class="waves-effect" href="#!">Home</a></li> <li><a class="waves-effect" href="#!">About us</a></li> </ul> 

Answer 2

只需在下面編寫代碼即可。...
您需要添加實現SC，JS和jQuery JS的CDN
這是您的固定導航欄

      <div class="navbar-fixed">
        <nav class="nav-wrapper">
          <div class="container">
            <a href="" class="brand-logo">Picnic.lk</a>
            <a href="" class="sidenav-trigger" data-target="mobile-menu">
              <i class="material-icons">menu</i>
            </a>
            <ul class="hide-on-med-and-down right">
              <li><a href="#photos">Photos</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#contact">Contacts</a></li>
            </ul>
           </div>
         </nav>
       </div>

您的移動導航欄（側面導航）

<ul class="sidenav grey lighten-2" id="mobile-menu">
    <li><a class="sidenav-close" href="#photos">Photos</a></li>
    <li><a class="sidenav-close" href="#services">Services</a></li>
    <li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>

在下面添加js代碼

<script>
 $(document).ready(function(){
    //side navigation
    $('.sidenav').sidenav({
        //your additional code goes here
    });
 });