javascript - 我希望我的 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-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>