Question

我的导航栏工作正常，有一个下拉菜单，只是让我的移动侧栏工作正常，但它似乎是下拉列表中的任何一种情况。如果我在侧边栏中编码了下拉列表，那么当窗口全屏并且导航栏可见时，我无法点击以使下拉工作。如果我取出侧边栏中下拉列表的代码，那么导航栏再次正常工作。任何人都可以解释如何使它们都工作？我确定我错过了一些非常明显的东西，但是我整个晚上一直在网上搜索，而且我已经接近撕裂了我的毛发。谢谢！

我的代码是：

    <!-- 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>

Answer 1

管理让这项工作到最后，万一有人在谷歌上遇到这种情况。复制下拉结构并给它id下拉2，然后在移动侧边栏中更改它，以便data-activates =“dropdown2”。现在看来这么简单我想到了！

物化Navbar下拉菜单/侧边栏下拉列表不会一起工作

1 个答案: