菜单悬停无法正确关闭

Question

我有一个带有下拉菜单的菜单，里面有另一个下拉菜单。如果将鼠标悬停在第一个下拉菜单上，它将展开。这是通过css完成的。但是，当我尝试使用css作为子菜单时，它不起作用。因此，我添加了javascript来控制悬停时打开子菜单。那行得通，但是直到我将鼠标移出第一个下拉菜单时，子菜单才会关闭。我希望一旦鼠标离开子菜单项就关闭它。

为了更好地理解这一点，请查看我的jsfiddle。打开菜单并将鼠标悬停在Shop项上，它将展开。然后将鼠标悬停在“更多选项”项上，它将展开。如果将鼠标移至Sub 2，则“更多选项”应该关闭但不会关闭。我知道我的JavaScript正在查看container-sub-menu1以将其关闭，并且正在按编码方式工作。但是，当我尝试使用子菜单时，它不起作用。请问有人将鼠标悬停在子菜单上时如何关闭子菜单吗？

$("#sub-menu1").on("mouseenter", function() {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("show")) {
    $(this).click();
  }
});
$("#container-sub-menu1").on("mouseleave", function() {
  // make sure it is shown:
  if ($(this).hasClass("show")) {
    $(this).children('.dropdown-toggle').first().click();
  }
});

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

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

.nav-subul {
  margin-left: 100px;
}

.dropdown-item {
  padding-left: 10px;
}

.dropdown-item::first-line {
  padding-top: 0px;
}

.dropdown-submenu {
  position: relative;
  padding-bottom: -10px;
}

.dropdown-submenu>.dropdown-menu {
  position: absolute;
  top: -20px;
  left: 54px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
  <nav class="navbar navbar-expand-lg navbar-light bg-custom">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
            <a class="dropdown-item" href="#">Sub 1</a>
            <a class="dropdown-item" href="#">Sub 2</a>

            <a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More Options
                    </a>
            <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
              <ul class="navbar-nav nav-subul">
                <li class="nav-item dropdown">
                  <div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Next 1</a>
                    <a class="dropdown-item" href="#">Next 2</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

当鼠标没有悬停在其上时，jQuery关闭子菜单：

$("#sub-menu1").on("mouseleave", function () {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("hide")) {
    $(this).click();
  }
});

演示：

$("#sub-menu1").on("mouseenter", function() {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("show")) {
    $(this).click();
  }
});

$("#sub-menu1").on("mouseleave", function() {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("hide")) {
    $(this).click();
  }
});
$("#container-sub-menu1").on("mouseleave", function() {
  // make sure it is shown:
  if ($(this).hasClass("show")) {
    $(this).children('.dropdown-toggle').first().click();
  }
});

.dropdown-menu{
   top:75% !important;
}

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

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

.nav-subul {
  margin-left: 100px;
}

.dropdown-item {
  padding-left: 10px;
}

.dropdown-item::first-line {
  padding-top: 0px;
}

.dropdown-submenu {
  position: relative;
  padding-bottom: -10px;
}

.dropdown-submenu>.dropdown-menu {
  position: absolute;
  top: -20px;
  left: 54px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
  <nav class="navbar navbar-expand-lg navbar-light bg-custom">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
            <a class="dropdown-item" href="#">Sub 1</a>
            <a class="dropdown-item" href="#">Sub 2</a>

            <a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More Options
                    </a>
            <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
              <ul class="navbar-nav nav-subul">
                <li class="nav-item dropdown">
                  <div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Next 1</a>
                    <a class="dropdown-item" href="#">Next 2</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

使用CSS的替代解决方案： 不需要jquery在悬停上显示下拉列表，只需使用CSS即可显示下拉列表。

.dropdown-item.dropdown-toggle:hover ~ .dropdown-submenu .navbar-nav .dropdown {
  display: block;

}

.dropdown-menu{
   top:75% !important;
}

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

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

.nav-subul {
  margin-left: 100px;
}

.dropdown-item {
  padding-left: 10px;
}

.dropdown-item::first-line {
  padding-top: 0px;
}

.dropdown-submenu {
  position: relative;
  padding-bottom: -10px;
}

.dropdown-submenu>.dropdown-menu {
  position: absolute;
  top: -20px;
  left: 54px;
}
.dropdown-item.dropdown-toggle:hover ~ .dropdown-submenu .navbar-nav .dropdown {
  display: block;
  
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

        <div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
          <nav class="navbar navbar-expand-lg navbar-light bg-custom">

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
                    <a class="dropdown-item" href="#">Sub 1</a>
                    <a class="dropdown-item" href="#">Sub 2</a>

                    <a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More Options
                    </a>
                    <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
                      <ul class="navbar-nav nav-subul">
                        <li class="nav-item dropdown">
       <div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Next 1</a>
                            <a class="dropdown-item" href="#">Next 2</a>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </nav>
        </div>