物化Navbar下拉菜单不起作用 [英] Materialize Navbar Dropdown Menu doens't work

问题描述

由于某些原因，本节中出现的下拉菜单不起作用. https://materializecss.com/navbar.html# ！ 控制台中没有错误，只是无法正常工作，我已经研究并尝试了几种解决方案，这些解决方案我发现了github和Codepen，但似乎没有任何解决办法，这可能是库版本引起的吗?我应该怎么办?这是我的代码

for some reason the dropwdown that appears in this section does not work. https://materializecss.com/navbar.html#! There are no errors in the console, it just does not work, I have researched and tried several solutions that I found github and codepen but nothing seems to solve it, could it be caused by the library version? what should I do? this is my code

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

和调用jquery后的脚本

and the script after call jquery

 $(document).ready(function(){
$(".dropdown-trigger").dropdown();
});

推荐答案

$(".dropdown-trigger").dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
   
    <ul class="left ">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown</a></li>
    </ul>
  </div>
</nav>

链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

这篇关于物化Navbar下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！