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

【问题标题】：Bootstrap navbar 3 level menu hover issueBootstrap 导航栏 3 级菜单悬停问题
【发布时间】：2017-07-25 19:03:07
【问题描述】：

我通过引用 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>

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案1】：

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

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

演示 https://jsfiddle.net/princesodhi/pegzte0h/

【讨论】：

它又多了一个问题伙伴。如果我们移动到没有任何子菜单的项目，则具有 SubMenu 的菜单的背景颜色仍然是暗的。你能帮忙stackoverflow.com/users/1636377/prince-sodhi
不幸的是它不起作用。您单击任何带有子菜单的菜单，然后将鼠标悬停在没有子菜单的菜单上，您会发现背景颜色保持不变。我们可以在 li 或 dropdown-menu 或 dropdown-submenu 的 mouseleave 上删除一些保留背景颜色的类吗？在 mouseleave 上更改背景颜色不起作用。
我通过添加下面的 jquery 代码解决了这个问题。 $(document).ready(function () { $('.dropdown-toggle').hover(function () { $(this).css('background-color', '#CCCCCC'); $(this) 。点击（）; }）; }）; $('.dropdown-submenu').mouseleave(function () { $(this).find('.dropdown-toggle').css('background-color', '#F9F9F9').attr('aria-展开', false); $(this).removeClass('open'); });

【解决方案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>

【讨论】：