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級菜單懸停問題

回答

相關問題