Question

我有一个响应式导航栏，其中包含使用materialize的下拉菜单。该下拉列表在移动版本上可以正常运行，但在桌面分辨率上不能正常运行，这对我来说是没有意义的，因为我只是复制粘贴内容。有人知道会发生什么吗？

代码：

$(".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

下拉菜单无法实现

1 个答案: