使用下拉菜单制作悬停鼠标效果答案

【问题标题】：Make hover mouse effect with dropdown-menu使用下拉菜单制作悬停鼠标效果
【发布时间】：2017-07-26 12:30:31
【问题描述】：

我想从我的Django website 改进我的HTML part，尤其是我的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);

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

谢谢

【问题讨论】：

您可以尝试将 'click' 与 'mouseenter' 交换
工作正常！如果我想直接从我的标签而不是从下拉菜单中添加悬停效果，我必须将ul.dropdown-menu 更改为li.dropdown-toggle 对吗？
这不是重复的：stackoverflow.com/questions/8878033/…
@ZimSystem 谢谢！我正在寻找我该怎么做;)

标签： jquery css twitter-bootstrap

【解决方案1】：

做这个小改变..

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

【讨论】：

不起作用，因为我无法访问我的dropdown-menu。我可以显示下拉菜单，但不能用鼠标访问它^^

【解决方案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;
}

【讨论】：