下拉汉堡不工作

Question

I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right

   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
          <div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
        </div>

        <div class="navbar-collapse collapse" id="myNav">
          <ul class="nav navbar-nav navbar-right">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#employment">Employment</a></li>
            <li><a href="#connect">Contact</a></li>
          </ul>
        </div>
      </div>

    </nav>

Answer 1

You need an onclick event on your button. There's currently nothing telling it what to do when you click the button. To get you started, you'll need to modify you button tag to something like:

<button onclick="toggleMenu" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">

Then, add some script:

 function toggleMenu() { let menu = document.getElementById('menu'); menu.classList.toggle('open-menu'); //toggle is an awesome built in function that does just what you want. It will add this class if it doesn't exists, and remove it if it does } 

After that, you'll have to add some CSS to style your menu for when it's opened.

Answer 2

对我来说很好，请确保您的视图宽度小于768px，否则汉堡将被隐藏。