Bootstrap dropdown-toggle error error

Я работаю над предварительно собранным файлом, который имеет выпадающий список в панели навигации. Клиент хочет, чтобы раскрывающийся список открывался при наведении курсора мыши. Поэтому я добавил в некоторый jQuery, чтобы добавить класс 'open' (как bootstrap делает, когда вызывается щелчок).Bootstrap dropdown-toggle error error

Это сработало, но вызвало новую проблему. Когда вы нажимаете один из вариантов в раскрывающемся списке, выпадающий элемент теперь мигает один раз перед закрытием и приводит меня к калеке по моему выбору.

Я исследовал это и не могу узнать, что вызывает эту «вспышку». Это была единственная статья, которую я нашел, которая показала обещание: 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

ответ

Смежные вопросы