jquery - 将鼠标悬停在父 Bootstrap 上时，会显示导航栏中的子菜单下拉菜单

Question

嗨， friend 们，我试图仅在其父项悬停时才显示子菜单下拉菜单，但在其祖父项自动悬停时显示。这是代码..

 <nav class="navbar navbar-default">
     <div class="container">
         <ul class="nav navbar-nav">
             <li class="dropdown">
              <a class="dropdown-toggle disabled" data-toggle="dropdown" href="https://www.drona.in/current-affairs/">GOVT JOBS</a>
        <li class="dropdown-submenu">
    <a class="test" data-toggle="dropdown" tabindex="-1" href="#">New               
       dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                       </ul>
                  </li>
          </ul>
       </div>
    </nav>

这是js

 $(function(){
$(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
            $(this).toggleClass('open');
            $('b', this).toggleClass("caret caret-up");                
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
            $(this).toggleClass('open');
            $('b', this).toggleClass("caret caret-up");                
        });

实际上，当我将鼠标悬停在新的下拉菜单上时，应该打开 2 级下拉菜单，但当我将鼠标悬停在政府职位上时，它会打开

Answer 1

如果您愿意，您可以仅使用 CSS 来完成此操作。

HTML 标记:

<div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
    </div>

和 CSS

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}