ドロップダウンメニューでホバーマウスエフェクトを作成する

Question

HTML partをDjango websiteから、特にBootstrap navbar tabから改善したいと思います。今まではdropdown-submenusがあり、次のメニュー、サブメニューにアクセスするには1つのタブをクリックしなければなりません。

マウスをタブ上に向け、クリックせずにマウスをポイントすると、メニューとサブメニューが表示されます。例えば

、私の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); 

ナビゲーションバーのタブの効果？

が..

Answer 1

は、この小さな変更を行います。その後

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

Answer 2

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

をありがとう、あなたは以下試すことができます。私はこれがうまくいくことを望みます。

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