Bootstrap导航栏3级菜单悬停问题

我已经通过引用Bootstrap 3 dropdown sub menu missing创建了引导菜单，但略有不同。它通过菜单和子菜单悬停工作正常。但是，如果我点击任何具有子菜单的菜单项，然后将鼠标悬停在其他菜单上，则两个菜单的子菜单都保持打开状态（上一个子菜单在点击时关闭，但不在新菜单上悬停）。我试图通过添加一个点击事件悬停在菜单上有子菜单来解决这个问题。它部分解决了我的问题。它关闭了先前点击（不是徘徊）菜单的子菜单，但前一个菜单的背景颜色并未改变为原始颜色。我在这里添加了工作代码，并附带了我的jQuery修补注释。只需将此代码复制到任何HTML文件并运行即可。Bootstrap导航栏3级菜单悬停问题

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" crossorigin="anonymous"></script> 
</head> 
<body> 
<style typ="text/css"> 
.nav > li > a, .dropdown-menu > li > a, .nav .open > a 
{ 
    height: auto; 
    display: block; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    padding-left: 5px; 
    padding-right: 10px; 
    text-decoration: none; 
    color: #284e36; 
    line-height: normal; 
    background-color: transparent; 
    border-bottom: 2px solid white; 
} 

.nav > li, .dropdown-menu > li, .nav .open 
{ 
    color: #284e36; 
    border: none; 
    background-color: #F9F9F9; 
} 

.nav > li > a:active, .dropdown-menu > li > a:active, .nav .open > a:active, .nav > li > a:focus, .dropdown-menu > li > a:focus, .nav .open > a:focus 
{ 
    background-color: #CCCCCC; 
    color: #001e06; 
    border: none; 
    border-bottom: 2px solid white; 
    margin-left:0; 
} 

.nav > li > a:hover, .dropdown-menu > li > a:hover, .nav .open > a:hover 
{ 
    background-color: #CCCCCC; 
    color: #001e06; 
    border: none; 
    border-bottom: 2px solid white; 
    margin-left:0; 
} 

.navbar-inverse 
{ 
    background-color: white; 
    border-color: white; 
} 

.navbar 
{ 
    border-radius: 0px; 
} 

.dropdown-menu 
{ 
    padding: 0; 
} 

/*https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing*/ 
.dropdown-submenu { 
    position:relative; 
} 
.dropdown-submenu:hover>.dropdown-menu { 
    display:block; 
} 
/* For desktop and ipad */ 
@media all and (min-width: 768px) 
{ 

    .dropdown-menu 
    { 
     margin: 0; 
     left: 100%; 
     top: 0; 
    } 

    .nav > li > a, .dropdown-menu > li > a, .nav .open > a 
    { 
     padding-top: 4px; 
     padding-bottom: 4px; 
    } 
} 

@media all and (max-width: 767px) 
{ 

    .dropdown-menu 
    { 
     left: 20%; 
     top: 90%; 
     width: 100%; 
     border: 1px solid white; 
    } 
} 

</style> 
<div class="navbar navbar-inverse navbar-default" style="width:300px"> 
    <ul class="nav"> 
     <li><a href="Home.aspx" >Home</a></li> 
     <li class="dropdown-submenu"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Menu 1 <span class="caret"></span> </a> 
     <ul class="dropdown-menu" > 
      <li><a href="SubMenu1.aspx">SubMenu 11</a></li> 
      <li class="dropdown-submenu"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Sub Menu 12<span class="caret"></span> </a> 
       <ul class="dropdown-menu" > 
        <li><a href="SubMenu121.aspx">Sub Menu 121</a></li> 
        <li><a href="SubMenu122.aspx">Sub Menu 122</a></li> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Sub Menu 13<span class="caret"></span> </a> 
       <ul class="dropdown-menu" > 
        <li><a href="SubMenu131.aspx">Sub Menu 131</a></li> 
        <li><a href="SubMenu132.aspx">Sub Menu 132</a></li> 
       </ul> 
      </li> 
      <li><a href="SubMenu14.aspx">Sub Menu 14</a></li> 
      <li><a href="SubMenu15.aspx">Sub Menu 15 </a></li> 
      <li><a href="SubMenu16.aspx">Sub Menu 16</a></li> 
      <li><a href="SubMenu17.aspx">Sub Menu 17</a></li> 
     </ul> 
     </li> 
     <li class="dropdown-submenu"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Menu 2<span class="caret"></span> </a> 
     <ul class="dropdown-menu" > 
      <li><a href="SubMenu21.aspx">Sub Menu 21</a></li> 
      <li><a href="SubMenu22.aspx">Sub Menu 21</a></li> 
      <li><a href="SubMenu23.aspx">Sub Menu 23</a></li> 
     </ul> 
     </li> 
     <li class="dropdown-submenu"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Menu 3<span class="caret"></span> </a> 
     <ul class="dropdown-menu" > 
      <li><a href="SubMenu31.aspx">Sub Menu 31</a></li> 
      <li><a href="SubMenu32.aspx">Sub Menu 32</a></li> 
      <li><a href="SubMenu33.aspx">Sub Menu 33</a></li> 
     </ul> 
     </li> 
     <li><a href="Menu.aspx" >Menu 4</a></li> 
     <li><a href="Menu.aspx" >Menu 5</a></li> 
    </ul> 
</div> 
<!-- 
<script type="text/javascript"> 
      $(document).ready(function() { 
       $('.dropdown-submenu').hover(function() { 
        $(this).click(); 
       }); 
      }); 
</script> 
--> 
</body>

来源

2017-07-07 Rajesh Patel

我通过添加下面的jQuery代码解决了这个问题。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.dropdown-toggle').hover(function() { 
      $(this).css('background-color', '#CCCCCC'); 
      $(this).click(); 
     }); 
    }); 

    $('.dropdown-submenu').mouseleave(function() { 
     $(this).find('.dropdown-toggle').css('background-color', '#F9F9F9').attr('aria-expanded', false); 
     $(this).removeClass('open'); 
    });  
</script>

来源

2017-07-25 11:03:07

如果我正确理解你的话。那么你需要检查这个。

$('li').hover(function() { 
     $(this).click(); 
});

DEMOhttps://jsfiddle.net/princesodhi/pegzte0h/

来源

2017-07-07 09:00:32

感谢队友（王子），它解决了我的问题 –

布拉沃然后你可以请投票答案？ –

它有一个问题队友。如果我们移动到没有任何子菜单的项目，具有SubMenu的菜单的背景色将保持黑暗。你能帮忙https://stackoverflow.com/users/1636377/prince-sodhi –

Bootstrap导航栏3级菜单悬停问题

回答

相关问题