Bootstrap - 懸停效果僅在導航欄未摺疊時才起作用

Question

如何在導航欄摺疊時禁用懸停效果？ 我在網上開發新東西真的很新，所以請提醒我。 感謝

*我的意思是，除去顯示的行動，另一個動作，等'當我的菜單被摺疊塊或移動視圖的懸停效果。

Answer 1

只能刪除腳本在HTML的底部，此代碼：

<script> 
    $('ul.nav li.dropdown').hover(function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
    }, function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
    }); 
</script> 

body { 
 
    padding-top: 70px; 
 
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
 
} 
 

 
.red { 
 
    color: red; 
 
} 
 

 
.form-area { 
 
    background-color: #FAFAFA; 
 
    padding: 10px 40px 60px; 
 
    margin: 10px 0px 60px; 
 
    border: 1px solid GREY; 
 
} 
 

 

 
/* footer */ 
 

 
.full { 
 
    width: 100%; 
 
} 
 

 
.gap { 
 
    height: 30px; 
 
    width: 100%; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
.footer { 
 
    background: #EDEFF1; 
 
    height: auto; 
 
    width: 100%; 
 
    clear: both; 
 
} 
 

 
.footer p { 
 
    margin: 0; 
 
} 
 

 
.footer img { 
 
    max-width: 100%; 
 
} 
 

 
.footer h3 { 
 
    border-bottom: 1px solid #BAC1C8; 
 
    color: #54697E; 
 
    font-size: 18px; 
 
    font-weight: 600; 
 
    line-height: 27px; 
 
    padding: 40px 0 10px; 
 
    text-transform: uppercase; 
 
} 
 

 
.footer ul { 
 
    font-size: 13px; 
 
    list-style-type: none; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    margin-top: 15px; 
 
    color: #7F8C8D; 
 
} 
 

 
.footer ul li a { 
 
    padding: 0 0 5px 0; 
 
    display: block; 
 
} 
 

 
.footer a { 
 
    color: #78828D 
 
} 
 

 
.supportLi h4 { 
 
    font-size: 20px; 
 
    font-weight: lighter; 
 
    line-height: normal; 
 
    margin-bottom: 0 !important; 
 
    padding-bottom: 0; 
 
} 
 

 
.footer-bottom { 
 
    background: #E3E3E3; 
 
    border-top: 1px solid #DDDDDD; 
 
    padding-top: 20px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.footer-bottom p.pull-left { 
 
    padding-top: 6px; 
 
} 
 

 
.footer-bottom p.pull-center { 
 
    text-align: center; 
 
} 
 

 
.payments { 
 
    font-size: 1.5em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid noHoverNav"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header "> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button><a href="~/" class="navbar-brand title-link">Tutorial Laravel</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="{{Request::path() == '/' ? 'active' : ''}}"><a href="/">Home</a></li> 
 
     <li class="{{Request::path() == 'about' ? 'active' : ''}}"><a href="about">About</a></li> 
 
     <li class="{{Request::path() == 'contact' ? 'active' : ''}}"><a href="contact">Contact</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <form class="navbar-form" role="search"> 
 
      <div class="input-group"> 
 
      <input type="text" class="form-control" name="search" placeholder="Search.."> 
 
      <div class="input-group-btn"> 
 
       <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<!-- DELET THIS SCRIPT! 
 

 
<script> 
 
    $('ul.nav li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
 
    }, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
 
    }); 
 
</script> 
 

 
--> 
 
<!-- end-navigation -->