我希望我的bootstrap 4導航欄在懸停時擴展

Question

這是我的導航欄代碼，我正在使用bootstrap 4 。 使用javascript或jquery的任何解決方案都將很有用。 我希望我的導航欄在懸停的漢堡圖標上顯示。

    <div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Agency</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Work</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Contact US</a>
          </li>
        </ul>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Answer 1

  $(document).ready(function() { $('.navbar-toggler').mouseover(function() { if($('.collapse').css('display') == 'none') $('.collapse').show(); else $('.collapse').hide(); }) }); 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <div class="pos-ft"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Agency</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Careers</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact US</a> </li> </ul> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </div> 

Answer 2

那就是我會怎么做

 $('.navbar-toggler').on('mouseenter', function(){ $('.collapse').addClass('show'); }); $('.pos-f-t').on('mouseleave', function(){ $('.collapse').removeClass('show'); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="pos-ft"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Agency</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Careers</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact US</a> </li> </ul> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </div> 

Answer 3

我認為使用ID來顯示和隱藏導航更好：

$('.navbar-toggler').mouseenter(function()
 {
   $('#navbarToggleExternalContent').css("display")!="block"?
   $('#navbarToggleExternalContent').show():
   $('#navbarToggleExternalContent').hide()

});