在懸停問題上隱藏下拉菜單

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>