引导:将鼠标悬停在下拉菜单中时，父菜单突出显示

Bootstrap: on hover in Dropdown menu parent menu highlighted

本文关键字：菜单 显示 鼠标 悬停 下拉菜单 引导      更新时间：2023-09-26

我在这里找到了解决方案：http://www.smartmenus.org/

我正在使用引导固定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>

当将鼠标悬停在父菜单上时，它会显示底部菜单，但是当我转到子菜单父菜单悬停状态消失时，在这种情况下应该选择它。有人可以帮我如何在引导程序 3.0 中实现它

吗？

试试 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>

相关文章：