Question

尽管我没有找到可以解决我的特定问题的解决方案，但我仍然可以问到这个问题。

我在菜单内没有一个子菜单，该子菜单无法按预期工作，只需将鼠标悬停在该菜单上即可显示该菜单，然后在未悬停时将其隐藏。

现在我可以将鼠标悬停在菜单项上，但是当我选择下一个选项时，它就会消失。

我不知道哪里出了问题，我知道这是一个简单的功能，但它却使我发疯！这是我在下面的工作：

$(document).ready(function() {
  $('.dropdown-submenu a.subhover').on("mouseover", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: hidden;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
  <a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a id="btn_addnew" href="#">Create Audit</a></li>
    <li><a href="store_departments_list.php">Departments</a></li>
    <li><a href="store_product_management2.php">Products</a></li>
    <li class="dropdown-submenu">
      <a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
      <ul style="display: none;" class="dropdown-menu">
        <li><a href="labour_costs.php"> Labour Costs </a></li>
        <li><a href="purchases_list.php"> Purchases </a></li>
        <li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
        <li><a href="waste_list.php"> Wastage </a></li>
      </ul>
    </li>
  </ul>
</li>

请原谅HTML部件的格式，无法使它看起来像在编辑器中的显示方式！

Answer 1

这可以仅使用CSS来完成。看看我的解决方案：

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
}

.subhover:hover ~ .dropdown-menu, .dropdown-menu:hover {
  display: block;
}

<li class="dropdown menu-btn">
  <a id=t estmanage class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a id="btn_addnew" href="#">Create Audit</a></li>
    <li><a href="store_departments_list.php">Departments</a></li>
    <li><a href="store_product_management2.php">Products</a></li>
    <li class="dropdown-submenu">
      <a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="labour_costs.php"> Labour Costs </a></li>
        <li><a href="purchases_list.php"> Purchases </a></li>
        <li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
        <li><a href="waste_list.php"> Wastage </a></li>
      </ul>
    </li>
  </ul>
</li>

在这个小提琴中，两个下拉菜单共同起作用： https://jsfiddle.net/thau2g9j/13/

Answer 2

它不起作用，因为您正在mouseover和mouseleave上执行相同的代码行。以下代码不是必需的。评论并检查是否满足您的要求。

$(document).ready(function() {
  $('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

下面是正在运行的代码段：

$(document).ready(function() {
  $('.dropdown-submenu a.subhover').on("mouseover", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

//$(document).ready(function() {
 // $('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
   // $(this).next('ul').toggle();
   // e.stopPropagation();
   // e.preventDefault();
 // });
//});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: hidden;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
  <a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a id="btn_addnew" href="#">Create Audit</a></li>
    <li><a href="store_departments_list.php">Departments</a></li>
    <li><a href="store_product_management2.php">Products</a></li>
    <li class="dropdown-submenu">
      <a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
      <ul style="display: none;" class="dropdown-menu">
        <li><a href="labour_costs.php"> Labour Costs </a></li>
        <li><a href="purchases_list.php"> Purchases </a></li>
        <li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
        <li><a href="waste_list.php"> Wastage </a></li>
      </ul>
    </li>
  </ul>
</li>

在悬停问题上隐藏下拉菜单

2 个答案: