下拉菜单无法实现

Question

我有一个响应式导航栏，带有一个使用物化的下拉菜单。下拉列表在移动版本上工作正常，但在桌面分辨率上不工作，这对我来说没有意义，因为我只是复制粘贴。有谁知道可能发生了什么？

代码：

$(".dropdown-trigger").dropdown({'coverTrigger': false, 'closeOnClick': true});

document.addEventListener('DOMContentLoaded', function() {
    var options = {
      'onOpenStart': myFunction, 
      'onCloseStart':myFunction
    };
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);

    
  });

<style type="text/css">
.no-shadows {
box-shadow: none!important;
}
</style>



<div class="navbar-fixed" style="position:fixed;"> 
<nav class="navbar-transition cool-navbar no-shadows">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></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>
  <li><a href="collapsible.html">Javascript</a></li>

  <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

</ul>
</div>
</nav>
</div>



<ul id="dropdown1" class="dropdown-content">
<li><a href=".">English</a></li>
<li class="divider"></li>
<li><a href=".">Español</a></li>


</ul>


<ul class="sidenav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>

<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

</ul>

谢谢！

Answer 1

您应该删除这行代码：

<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

发生错误是因为您的代码中有两个 data-target="dropdown1"。你应该有独特的 data-target="" 属性。因此，如果您想向页面添加另一个下拉菜单，此属性的 data-target="" 值应该是例如 "dropdown2".

jsfiddle

下拉菜单无法实现

dropdown not working in materialize

html

javascript

materialize