Question

我正在尝试使用下拉菜单实现sidenav。目前的情况是它始终在全屏显示并隐藏在小屏幕上。

请注意，下拉功能正常，这让我相信jQuery正在运行。

html片段：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

  <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>


  <style type="text/css">

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

  </style>
 <script language="javascript">
   $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );
  $('.collapsible').collapsible();
 </script>



</head>

  <body>
<main>

   <!-- Side Bar -->
<nav>

   <!-- Navigation Bar -->

<div class="nav-wrapper">
      <a href="/" class="brand-logo center">Wagba</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      </ul>


 <ul class="hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <ul id="slide-out" class="side-nav fixed">
      <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>

   </div>
</nav>
<!-- Navigation Bar End -->

Answer 1

您需要在其中编写脚本初始化 $（文件）。就绪（函数（）{ ... }）;

检查下面更正的页面：

<!DOCTYPE html>
<html>
<head>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>


  <style type="text/css">

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

  </style>
 <script language="javascript">
 $(document).ready(function(){
	   $('.button-collapse').sideNav({
		  menuWidth: 300, // Default is 240
		  closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
		}
	  );
	  $('.collapsible').collapsible();
  });
 </script>



</head>

  <body>
<main>

   <!-- Side Bar -->
<nav>

   <!-- Navigation Bar -->

<div class="nav-wrapper">
      <a href="/" class="brand-logo center">Wagba</a>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>



 <ul class="hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <ul id="slide-out" class="side-nav">
      <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>

   </div>
</nav>
<!-- Navigation Bar End -->

Answer 2

在新的实现CSS中，您需要在子元素中添加一个额外的类，以便在单击链接时，侧边栏会自动关闭

<ul id="slide-out" class="sidenav">
  <li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>

CSS - 实现SideNav不会关闭

2 个答案: