javascript - Bootstrap : on hover in Dropdown menu parent menu highlighted

Question

i found solution here : http://www.smartmenus.org/

我正在使用 bootstrap fixed nav，我对其进行了一些定制，这样当有人将鼠标悬停在子菜单上时，它就会显示出来，而不是点击菜单。

这是我添加的代码:

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

这是 HTML 的结构:

<li class="dropdown">
    <a href="#" 
       class="dropdown-toggle" 
       data-toggle="dropdown" 
       role="button"  
       arial-expanded="false"> Top Menu
    </a>
<ul class="dropdown-menu">
    <li><a href="submenu.php">submenu</a></li>
    <li><a href="submenu.php">submenu</a></li>
    <li><a href="submenu.php">submenu</a></li>
    </li>
</ul>

当悬停在父菜单上时，它会显示底部菜单，但是当我转到子菜单时，父菜单的悬停状态消失了，在那种情况下应该选择它。有人可以帮我如何在 bootstrap 3.0 中实现它

Answer 1

用 JavaScript 试试:

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    );
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"  arial-expanded="false">Top Menu</a>
<ul class="dropdown-menu">
<li><a href="submenu.php">submenu</a></li>
<li><a href="submenu.php">submenu</a></li>
<li><a href="submenu.php">submenu</a></li>
</ul>
</li>