菜单悬停未正确关闭

Question

我有一个带有下拉菜单的菜单，其中有另一个下拉菜单。如果我将鼠标悬停在第一个下拉菜单上，它会展开。它是通过 css 完成的。但是当我为子菜单尝试 css 时，它不起作用。所以我添加了 javascript 来控制悬停时打开子菜单。这行得通，但直到我将鼠标从第一个下拉列表中移开后，子菜单才会关闭。我希望它在鼠标离开子菜单项时关闭。

为了更好地理解这一点，请看我的jsfiddle。打开菜单并将鼠标悬停在商店项目上，它将展开。然后将鼠标悬停在“更多选项”项目上，它将展开。如果将鼠标向上移动到 Sub 2，则更多选项应该会关闭但不会。我知道我有 javascript 查看 container-sub-menu1 以关闭它并且它正在按编码工作。但是当我尝试使用 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>

菜单悬停未正确关闭

Menu hover doesn't close properly

menu

hover

dropdown

bootstrap-4