使下拉菜單懸停鼠標效果

我想提高我的HTML part從我的Django website，特別是我的Bootstrap navbar tab。到目前爲止，我有一些dropdown-submenus，我必須點擊一個標籤才能訪問下一個菜單，然後是子菜單。使下拉菜單懸停鼠標效果

我想獲得懸停效果，以便將鼠標指向選項卡上，而無需單擊，即可獲取菜單和子菜單。

例如，我的HTML標籤的一個樣子：

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     <span class="glyphicon glyphicon-book"></span> 
     Tables Annuelles & Décennales 
     <b class="caret"></b> 
    </a> 

    <ul class="dropdown-menu"> 
     <li class="dropdown dropdown-submenu"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       <span class="glyphicon glyphicon-file"></span> 
       Edition Tables annuelles 
      </a> 

      <ul class="dropdown-menu"> 
       <li><a href="{% url "annuel" %}">Naissances</a></li> 
       <li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li> 
       <li><a href="{% url "BCnotfound" %}">Mariages</a></li> 
       <li><a href="{% url "BCnotfound" %}">Décès</a></li> 
      </ul> 
     </li> 

     <li class="dropdown dropdown-submenu"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       <span class="glyphicon glyphicon-book"></span> 
       Edition Tables décennales 
      </a> 

      <ul class="dropdown-menu"> 
       <li><a href="{% url "BCnotfound" %}">Naissances</a></li> 
       <li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li> 
       <li><a href="{% url "BCnotfound" %}">Mariages</a></li> 
       <li><a href="{% url "BCnotfound" %}">Décès</a></li> 
      </ul> 
     </li> 
    </ul> 
</li>

而且我看起來像一個javascript部分：

(function($){ 
     $(document).ready(function(){ 
      $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
       $(this).parent().siblings().removeClass('open'); 
       $(this).parent().toggleClass('open'); 
      }); 
     }); 
    })(jQuery);

如果我要修改的元素，爲了得到懸停效果在我的導航欄選項卡上？

謝謝

來源

2017-03-06 Deadpool

你可以嘗試用'mouseenter'交換'點擊' –

工作正常！如果我想直接從我的選項卡添加懸停效果，而不是從下拉菜單中添加懸停效果，我必須通過'li.dropdown-toggle'右邊來更改'ul.dropdown-menu'。 – Deadpool

這不是一個重複：http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click – ZimSystem

製作這個小變化..

$('ul.dropdown-menu [data-toggle=dropdown]').hover(function(event) {

來源

2017-03-06 15:13:34 Jana

不起作用，因爲我無法訪問我的「下拉菜單」。我可以顯示下拉菜單，但不能用鼠標訪問它^^ – Deadpool

okai fine..nt pblm .. – Jana

<ul class="dropdown-menu"> --> change to <ul class="navbar-nav"> 
    <li class="dropdown dropdown-submenu">

之後，你可以在下面試試。我希望這會起作用。

.navbar-nav li.dropdown:hover .dropdown-menu { 
    display: block; 
}

來源

2017-03-07 09:47:13

使下拉菜單懸停鼠標效果

回答

相關問題