我希望我的 bootstrap 4 导航栏在悬停时展开答案

【问题标题】：I want my bootstrap 4 navbar to expand on hover我希望我的 bootstrap 4 导航栏在悬停时展开
【发布时间】：2018-05-15 15:57:03
【问题描述】：

这是我的导航栏代码，我正在使用 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>

【问题讨论】：

为jQuery和Bootstrap添加js文件。这会工作
是的，我已经添加并链接了它们，但是如何激活悬停效果

标签： javascript jquery css bootstrap-4

【解决方案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>

【讨论】：

使用show类名。这样会更好。
在sn-p中插入jquery代码查看结果
我真的认为要求投票是不公平的。每个人都可以自己决定答案是否值得投票。
@Klooven OP 否决，因为我使用 .ccs(....) 而不是 .show()，所以我编辑了答案并要求他在编辑后再次回复
@AkashSalunkhe 如果有帮助请标记为答案

【解决方案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-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>

【讨论】：

【解决方案3】：

我认为最好使用 id 来显示和隐藏导航：

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

});

【讨论】：