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);
ナビゲーションバーのタブの効果?
が..
あなたが正常に動作します –
「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