全屏导航栏覆盖菜单第二次无法正常工作

编程问答 2022-07-09

问题描述

我为Bootstrap的导航栏创建了一个全屏覆盖菜单，表面上一切正常。单击链接时，我使用了jquery关闭菜单，该菜单可以按需要工作，但是当我想返回到导航栏时会出现我的问题。这需要大量的单击，导航栏将关闭，并且直到您最终再次单击该链接时才按预期进行操作。

我观察到以下模式可以更好地描述问题：

测试-标准链接

  • 第一次点击-效果很好
  • 第二次单击-全屏导航菜单闪烁（也许要打开？）然后关闭
  • 第三次单击-效果很好-可以单击链接
  • 第四次点击-闪烁并关闭
  • 第5次点击-效果很好

测试-下拉菜单链接

我对jquery或Javascript不太熟悉-我使用的代码是从外部来源获取的，而不是我自己编写的。因此，我对如何解决问题一无所知，而Google搜索似乎让我无处可寻。

任何帮助将不胜感激，谢谢您。

这是我的代码：

$('.navbar-toggler').click(function() {
  $(this).toggleClass('active');
  $('.navbar-collapse').toggleClass('open').show();
});


// Closes the menu after clicking link

$('.navbar-collapse li').on('click',function() {
  $(".navbar-collapse").hide();
  $(".navbar-toggler").removeClass("active");
});
  /* FULLSCREEN OVERLAY  */

.navbar .navbar-toggler {
  z-index: 5;
}

@media (max-width:991.98px) {
  .navbar .navbar-collapse {
    background-color: #4a4a4a;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.35s ease;
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center !important;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .navbar .navbar-collapse.collapse {
    display: flex;
    opacity: 0;
    pointer-events: none
  }
  .navbar .navbar-collapse.collapsing[style*="height"] {
    opacity: 1;
    height: 100vh !important
  }
  .navbar .navbar-collapse.collapsing {
    opacity: 0;
    height: 100vh
  }
  .navbar .navbar-collapse.collapse.show {
    opacity: 1;
    pointer-events: auto
  }
  .navbar .navbar-collapse .navbar-nav {
    margin: auto;
  }
  .navbar-nav {
    margin-left: initial !important;
  }
  /* PAGES */
  .pageExample {
    background-color: cadetblue;
    color: white;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    padding-top: 20rem;
    padding-bottom: 10rem;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Fullscreen Navbar</title>
</head>

<body>

  <!-- NAVBAR -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light mb-auto fixed-top">
    <div class="container">

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapseContent" aria-controls="navbarCollapseContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

      <!-- NAV-LINKS  -->

      <div class="collapse navbar-collapse" id="navbarCollapseContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a href="#about" class="nav-link">About Me</a>
          </li>
          <li class="nav-item">
            <a href="#skills" class="nav-link">Skills</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="experienceDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Experience
                  </a>
            <div class="dropdown-menu" aria-labelledby="experienceDropdownMenu">
              <a href="#education" class="dropdown-item">Education</a>
              <a href="#work" class="dropdown-item">Work </a>
            </div>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>

      <!-- NAV-LINKS  -->

    </div>
  </nav>
  <!-- NAVBAR -->

  <!-- PAGE EXAMPLE -->
  <section>
    <div id="about" class="pageExample">
      <h1>About Me</h1>
    </div>
    <div id="skills" class="pageExample">
      <h1>Skills</h1>
    </div>
    <div id="education" class="pageExample">
      <h1>Education</h1>
    </div>
    <div id="work" class="pageExample">
      <h1>Work</h1>
    </div>
    <div id="contact" class="pageExample">
      <h1>Contact</h1>
    </div>
  </section>
  <!-- PAGE EXAMPLE -->



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js"></script>

</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fullscreenfullscreenjavascriptjqueryjquery-mobile-navbarnavbarnavbar