Question

我有一个页面，其中有两个辅助导航。我希望一个sidenav打开目录供用户在网站上移动，注销等。我希望另一个sidenav打开消息系统。

       <script>
   $(document).ready(function(){
     $('.sidenav').sidenav();
   });
  </script>

<body>
       <div class="container">


          <ul id="slide-out" class="sidenav">
        <li><div class="user-view">
          <div class="background">
            <img src="images/something.jpg id="RS">
          </div>
          <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
        </div></li>
        <li><a class="subheader">Subheader</a></li>
        <li><a class="waves-effect" href="login.php"> 
     Login</a></li>
        <li><a class="waves-effect" href="stafflogin.php">Staff Login</a></li>
        <li><a class="waves-effect" href="#!">Forgotten Password</a></li>
      </ul>
      <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>

    <ul id="slide-out" class="sidenav">
  <li><div class="user-view">
  <div class="background">
<img src="images/office.jpg">
 </div>
   <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
   <a href="#name"><span class="white-text name">John Doe</span></a>
   <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>


 </div></li>
 <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
 <li><a href="#!">Second Link</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>
 <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">chat</i></a>

我打开了第一个sidenav，并且可以，并且标题与代码中列出的相同。我打开第二个sidenav（用于消息传递系统的那个），它与第一个sidenav相同，无论我更改了多少HTML，第二个sidenav的内容都与第一个sidenav相同

同一页面上的两个sidenav

0 个答案: