Question

作为练习，我正在创建一个bootstrap html网站。我有一个导航栏，其中包含一些基本按钮和一个下拉菜单。每个导航链接会将页面滚动到相关部分。

现在，当我在代码中使用“ section id ='gallery'”时，我在导航栏中的下拉菜单不再起作用。当我使用其他任何ID或空白时，它会按预期工作。请注意，所有其他部分都遵循相同的原理并且正在工作。

是什么原因导致该问题，该如何解决？

感谢您的帮助。

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-light bg-dark fixed-top" id="mainNav">
  <div class="container">
    <a href="#page-top" class="navbar-brand js-scroll-trigger">Title</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#about" class="nav-link js-scroll-trigger">About</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#gallery" class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gallery</a>
          <div class="dropdown-menu js-scroll-trigger" aria-labelledby="navbarDropdownMenuLink">
            <a href="#content1" class="dropdown-item js-scroll-trigger">Content1</a>
            <a href="#content2" class="dropdown-item js-scroll-trigger">Content2</a>
          </div>
        </li>
        <li class="nav-item">
          <a href="#contact" class="nav-link js-scroll-trigger">Contact</a>
        </li>
      </ul>
    </div> <!-- End navbarResponsive -->
  </div> <!-- End container -->
</nav>

<!-- END Navbar -->

错误ID在下面。当我将“＃”更改为“图库”时，下拉菜单不起作用。

<!-- Gallery -->
<section id="#" class="content-section text center">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2 class="headerText">Gallery</h2>
      <!-- Content1 -->
        <section id="content1" class="content-section text center">
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <h3 class="headerText">Content1</h3>
              </div>
            </div>
          </div>
        </section>

        <!-- End Content1 -->

        <!-- Content2 -->

        <section id="content2" class="content-section text center">
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <h3 class="headerText">Content2</h3>
              </div>
            </div>
          </div>
        </section> <!-- End Content2 -->
      </div>
    </div>
  </div>
</section>

<!-- END Gallery -->

希望有人可以帮助我更好地理解这一点。

Answer 1

当您说其他所有部分都遵循相同的原理并且正在工作时。你是说

<a href="#content1" class="dropdown-item js-scroll-trigger">Content1</a>
<a href="#content2" class="dropdown-item js-scroll-trigger">Content2</a>

因为这些链接将链接到您在href中注释的部分

<a href="#gallery" class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gallery</a>

这是一个“按钮”，用于显示和隐藏您的下拉菜单。如果您希望下拉菜单正常工作，则无法链接到#gallery，因为单击只会打开并关闭下拉菜单。如果您想链接到图库部分，则需要使用设置content1和content2的相同方式配置标签
您可以尝试这样的事情

<li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gallery Menu</a>
          <div class="dropdown-menu js-scroll-trigger" aria-labelledby="navbarDropdownMenuLink">
            <a href="#gallery" class="dropdown-item js-scroll-trigger">Gallery Section</a>
            <a href="#content1" class="dropdown-item js-scroll-trigger">Content1</a>
            <a href="#content2" class="dropdown-item js-scroll-trigger">Content2</a>
          </div>
        </li>

Answer 2

我认为您不应将id #galery放在href中，否则您将看不到子菜单，而只能使用两个子项的引用。

部分ID禁用引导导航栏-为什么？

2 个答案: