在導航欄崩潰後禁用懸停效果

Question

我有一個具有下拉菜單按鈕的引導欄，當它們懸停時會自動下拉。但是，當菜單被摺疊時（按768px），我想禁用這種懸停效果，所以只有當按鈕被點擊時，菜單纔會下降。

我試過一些沒有用的東西。現在我試圖使用媒體查詢來禁用懸停效果，但我不知道如何繼續。任何意見將不勝感激！編輯：​​我正在使用的代碼。如果您單擊顯示屏右上方的移動圖標，則可以看到在摺疊菜單時酒吧的反應情況。

Answer 1

我相信你所需要做的就是將你的懸停規則設置爲只能在767px以上工作，那麼移動導航欄將按默認規則操作。

查看工作示例。

• 有一件事我已經添加了一個自定義類的navbar（navbar-custom在本例中，或者如果你走這條路線無論是有道理的），因此核心不直接覆蓋。這並不是一切工作都需要的，只是我覺得最好的做法。

@media (min-width: 767px) { 
 
    .navbar-custom .dropdown:hover .dropdown-menu { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav role="navigation" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
    </button> <a href="~/" class="navbar-brand title-link">Gateway Ranch</a> 
 

 
    </div> 
 
    <!-- Collection of nav links, forms, and other content for toggling --> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse centeredText"> 
 
    <ul class="nav navbar-nav centeredText"> 
 
     <li><a href="~/Home/Contact">Contact</a> 
 

 
     </li> 
 
     <li><a href="#">Profile</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="~/Horse/">Horses<b class="caret"></b></a> 
 

 
     <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="~/Horse/">For Sale</a> 
 

 
      </li> 
 
      <li><a href="#">Brood Mare</a> 
 

 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 2

您可以在媒體查詢更改顯示的值該規則，不知道什麼是你想要的，但可能inline或inline-block（或none如果你不想讓.dropdown-menu在所有顯示） ：

@media (max-width: 767px) 
{ 
    .dropdown:hover .dropdown-menu { 
     display: none; 
    } 
} 

有是沒有這樣的事「禁用」的規則的屬性，但是，您可以將其更改爲另一個值，因爲我在這裏所示的例子。