Question

我在这里找到了解决方案：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：

＆＃13;

$(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');       
        }
    );
});

＆＃13;

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

＆＃13;

Bootstrap：悬停在Dropdown菜单中，父菜单突出显示

1 个答案: