Question

我使用Materialise进行设计。下拉列表和sidenav不起作用。控制台没有给出任何错误，我在jQuery之后初始化了脚本，就像materializecss.js一样。

以下是代码：

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(".button-collapse").sideNav();</script>
    <script>$(document).ready(function(){
        $('.parallax').parallax();
    });</script>
    <script>
        $(".dropdown-button").dropdown({
            hover: false
        });
    </script>
</head>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

Answer 1

在设置侧面导航和下拉列表之前，您需要确保文档已加载。只需在document.ready函数

中移动该代码即可

＆＃13;

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(document).ready(function(){
        $(".button-collapse").sideNav();
        $('.parallax').parallax();
        $(".dropdown-button").dropdown({
            hover: false
        });
    });</script>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

＆＃13;

Answer 2

您是否尝试将脚本放在 END OF BODY ELEMENT ？它对我有用。

＆＃13;

<script>$(document).ready(function(){
    $(".button-collapse").sideNav();
    $('.parallax').parallax();
    $(".dropdown-button").dropdown({
        hover: false
    });
  });
</script>

＆＃13;

Answer 3

这段代码对我有用!!您可以在此处找到完整的说明：http://materializecss.com/side-nav.html

<ul id="slide-out" class="side-nav">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li class="no-padding">
    <ul class="collapsible collapsible-accordion">
      <li>
        <a class="collapsible-header">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>
<ul class="right hide-on-med-and-down">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
  <ul id='dropdown1' class='dropdown-content'>
    <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>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

物化下拉和sidenav不起作用

3 个答案: