引導程序下拉式開關閃爍錯誤

我正在處理導航欄中具有下拉列表的預組裝文件。客戶端希望在鼠標懸停時打開下拉菜單。所以我在一些jQuery中添加了'open'類（就像點擊下拉菜單時的bootstrap一樣）。引導程序下拉式開關閃爍錯誤

這工作但已造成一個新問題。當點擊下拉菜單中的一個選項時，下拉菜單現在會在關閉之前閃爍一次，並將我帶入所選的包中。

我研究了這一點，無法找出是什麼導致這個'閃光'。這是我發現承諾的唯一文章：Twitter bootstrap stop propagation on dropdown open

任何幫助將是偉大的！

我試圖在這個JSFiddle重新創建這個問題，但我沒有得到'閃光燈'。

這是我的HTML代碼...

<div class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid "> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="STUFF.cfm?page=home"> 
 
     STUFF AND MORE STUFF 
 
     </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="dropdown"> 
 
      <a href="##" class="dropdown-toggle" data-toggle="dropdown" id="nav-dropdown-toggle">FULL NAME STUFF <span class="caret"></span></a> 
 
      <ul class="dropdown-menu dropdown-menu-css" role="menu"> 
 
       <li><a href="STUFF.cfm?page=home">Home Page</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 1</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 2</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 3</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 4</a></li>    
 
       <li class="divider"></li> 
 
       <li><a id="logout-li" href="##" name="btn-logout">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
    </div> \t <!--/.nav-collapse --> 
 
    </div> \t <!--/.container-fluid --> 
 
</div>

這裏是JS

(function(){ 
 
    
 
    $("ul.nav.navbar-nav.navbar-right").hover(function(){ 
 

 
    $("li.dropdown").toggleClass('open'); 
 
    }) 
 
})()

應當指出的是，我們的基本語言是ColdFusion的。謝謝你們！

來源

2017-02-15 davidhartman00

我的腳本太頻繁地切換課程'開放'，因此造成'閃爍'效果。相反，我重寫我的JS如下首先檢查，如果「開放」類已經存在：

$("ul.nav.navbar-nav.navbar-right").mouseenter(function(){ 
 
     if(!$("li.dropdown").hasClass("open")){ 
 
      $("li.dropdown").toggleClass('open'); 
 
     } 
 
     }) 
 
     .mouseleave(function(){ 
 
     if($("li.dropdown").hasClass("open")){ 
 
      $("li.dropdown").toggleClass('open'); 
 
      } 
 
     })

來源

2017-02-16 17:44:09 davidhartman00

我會建議你使用這個簡單的CSS實現你want--

/* Change color of dropdown links on hover */ 
 
.dropdown-menu a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu on hover */ 
 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus { 
 
\t background-image: none; 
 
\t background-color: #9fdfbf; 
 
}

<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      
 
    
 
</head> 
 
<div class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid "> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="STUFF.cfm?page=home"> 
 
     STUFF AND MORE STUFF 
 
     </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="dropdown"> 
 
      <a href="##" class="dropdown-toggle" data-toggle="dropdown" id="nav-dropdown-toggle">FULL NAME STUFF <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="STUFF.cfm?page=home">Home Page</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 1</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 2</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 3</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 4</a></li>    
 
       <li class="divider"></li> 
 
       <li><a id="logout-li" href="##" name="btn-logout">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
    </div> \t <!--/.nav-collapse --> 
 
    </div> \t <!--/.container-fluid --> 
 
</div>

注：我的回答似乎對屏幕尺寸小一些的問題。嘗試解決這個問題！

希望這會有所幫助！

來源

2017-02-15 00:50:26 neophyte

引導程序下拉式開關閃爍錯誤

回答

相關問題