Bootstrap Navbar Hamburger 折叠时不起作用

Posted 2023-05-08

【中文标题】Bootstrap Navbar Hamburger 折叠时不起作用

【英文标题】：Bootstrap Navbar Hamburger isn't working when collapsed

【发布时间】：2018-05-23 09:02:26

【问题描述】：

由于某种原因，缩小应用程序时汉堡菜单不再显示。我没有更改代码中的任何内容，但似乎无法找到破坏它的原因。任何建议将不胜感激！

    <nav class="navbar fixed-top navbar-expand-lg navbar-primary bg-dark">
     <a class="navbar-brand" href="/">Market Monster</a> <button aria-controls=
"navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class=
"navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type=
"button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse navbar-toggler-right" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
    <!-- <li class="nav-item active">
      <a class="nav-link" href="/dashboard">Guest</a>
    </li> -->
    <li class="nav-item active">
      <a class="nav-link" href="/signup">Sign Up</a>
    </li>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js">
</script>
 <nav class="navbar fixed-top navbar-expand-lg navbar-primary bg-dark">
<a class="navbar-brand" href="/">Market Monster</a> <button aria-controls=
"navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class=
"navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type=
"button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse navbar-toggler-right" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
    <!-- <li class="nav-item active">
      <a class="nav-link" href="/dashboard">Guest</a>
    </li> -->
    <li class="nav-item active">
      <a class="nav-link" href="/signup">Sign Up</a>
    </li>
    </ul>
  <!-- <a class="btn btn-outline-primary my-2 my-sm-0" href="/signin">Log In</a> -->
</div>

【问题讨论】：

显然缺少 </ul> 意味着已注释掉并且关闭 </nav> 也

我重新添加了 但它仍然没有解决问题。我检查了所有 div、nav、ul 和 li 现在都关闭了

看起来汉堡菜单在那里但图标丢失或颜色匹配下载源以验证或更改cdn源

【参考方案1】：

我已经度过了一整天。最后，我有一个解决方案。它非常适合我。

// Custom js
jQuery(document).ready(function()
    //Hamburger menu toggle
    $('.top-nav-menu ul li a.nav-link').on('click', function()
        // check if window is small enough so dropdown is created
        var toggle = $(".navbar-toggler-icon").is(":visible");
        if (toggle) 
          $(".navbar-collapse").collapse('hide');
        

    );
);

<nav class="navbar navbar-expand-lg navbar-light fixed-top">

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

  <div class="top-nav-menu collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="smoth-scroll nav-link" href="#about-section">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="smoth-scroll nav-link" href="#resume">Resume</a>
      </li>
      <li class="nav-item">
        <a class="smoth-scroll nav-link" href="#testimonial">Testimonial</a>
      </li>
      <li class="nav-item">
        <a class="smoth-scroll nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="smoth-scroll nav-link" href="#contact">Contact</a>
      </li><!-- 
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li> -->
    </ul>
  </div>
</nav>

【讨论】：

一般来说，如果答案包含对代码的用途的解释，以及为什么在不介绍其他人的情况下解决问题的原因，答案会更有帮助。

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。 举报者/评论者： For code-only answers such as this one, downvote, don't delete!