html - 部分 ID 禁用引导导航栏下拉菜单 - 为什么？

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 相同的方式配置 a 标签
你可以试试这样的东西

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