Question

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

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

Answer 1

如果我理解正确的话。那你需要检查一下。

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

DEMO https://jsfiddle.net/princesodhi/pegzte0h/

Answer 2

我通过添加以下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>

Bootstrap navbar 3级菜单悬停问题

2 个答案: