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

debugcn 发表于 Dev

雾839_33

我可以看到有人问了这个问题，尽管我没有找到解决我的具体问题的解决方案。

我在菜单中有一个无法按预期工作的子菜单，它只需要在悬停时显示，然后当它没有悬停时隐藏子菜单。

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

我不知道我哪里出错了，我知道这是一个简单的功能，但它让我发疯！这是我的工作如下：

$(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 部分的格式，无法让它看起来像它在我的编辑器上的显示方式！

J·萨迪

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

.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>