Question

我想从我的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);

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

谢谢

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;
}

使用下拉菜单悬停鼠标效果

2 个答案: