jquery - 使用下拉菜单制作悬停鼠标效果

Question

我想通过我的 Django 网站 改进我的 HTML 部分，尤其是我的 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);

我必须在哪里修改元素才能在我的导航栏选项卡上获得悬停效果？

谢谢

Answer 1

做这个小改动..

$('ul.dropdown-menu [data-toggle=dropdown]').hover(函数(事件) {