Question

出于某种原因，在缩小我的应用程序时，汉堡包菜单不再显示。我没有改变代码中的任何内容，但似乎无法追查是什么打破了它。任何建议将不胜感激！

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

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

折叠后Bootstrap Navbar Hamburger无法正常工作

1 个答案: