jquery - Materialise Navbar 下拉菜单/侧边栏下拉菜单不能一起工作

标签 jquery html css frameworks materialize

我的导航栏工作正常,有一个下拉菜单,我的移动侧边栏也工作正常,但是下拉菜单似乎是一个非此即彼的情况。 如果我在侧边栏中编码了下拉菜单,那么当窗口全屏并且导航栏可见时,我无法单击以使下拉菜单工作。 如果我取出侧边栏中下拉菜单的代码,那么导航栏又可以正常工作了。 任何人都可以阐明如何让他们都工作吗? 我确定我遗漏了一些非常明显的东西,但我整个晚上都在网上搜索,我快要为此撕破头发了。 谢谢!

我的代码是:

    <!-- Dropdown Structure-->
<ul id="dropdown1" class="dropdown-content">
    <li><a href="upperbody.html">Upper Body</a></li>
    <li><a href="lowerbody.html">Lower Body</a></li>
    <li><a href="core.html">Core</a></li>
    <li><a href="conditioning.html">Conditioning</a></li>
    <li class="divider"></li>
</ul>
<nav class="teal">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Fit4Rugby</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li class="active"><a href="index.html">Home</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Exercises<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="routines.html">Routines</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="store.html">Store</a></li>
    </ul>
<!--Side Bar Popout-->      
    <ul class="side-nav" id="mobile-demo">
      <li><a href="index.html">Home</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Exercises<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="routines.html">Routines</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="store.html">Store</a></li>
    </ul>
  </div>
</nav>

最佳答案

设法让这个最终工作,以防万一有人在谷歌上偶然发现这个。 复制下拉结构并为其指定 id dropdown2,然后在移动侧边栏中将其更改为 data-activates="dropdown2"。现在想想好像很简单!

关于jquery - Materialise Navbar 下拉菜单/侧边栏下拉菜单不能一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46921281/

相关文章:

c# - 将查询字符串隐藏到 URL 中

javascript - 如何使用 mixin 覆盖这个函数?

javascript - 有没有办法让跨平台溢出:scroll

html - 在 CSS 中更改 ionic 元素的背景颜色

html - 如何更改任何可点击 html 控件的默认虚线边框

jquery - 关于在加载 Angular 2 应用程序时要做什么的一些问题

javascript - 全日历 JSON/AJAX

javascript - 始终显示总计并停止显示 NaN

jquery - CSS 3D 轮播元素旋转

css - Less 是在编译为 css 时在 url 上添加不需要的代码