Javascript-懸停時的Bootstrap下拉菜單打開子菜單的所有菜單級別

Question

我已經具有可與僅具有一個下拉菜單的下拉列表項一起很好地使用的javascript函數，但是當我具有帶有兩個或菜單子菜單級別的下拉列表項時會發生問題，因為在懸停時它將打開子菜單的所有菜單級別...該網站已經上線，請看一下-http://mile.x3.rs/mile/uram/

可以在一個下拉菜單級別正常運行的JavaScript

 // MENU HOVER $(document).ready(function() { $(".dropdown, .dropdown-active").hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); }); }); 

 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Partneri">Partneri <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#" title="Partner 1">Partner 1</a> </li> <li><a href="#" title="Partner 2">Partner 2</a> </li> <li><a href="#" title="Partner 3">Partner 3</a> </li> <li><a href="#" title="Partner 4">Partner 4</a> </li> <li><a href="#" title="Partner 5">Partner 5</a> </li> <li><a href="#" title="Partner 6">Partner 6</a> </li> </ul> </li> 

但是這個

 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li class="dropdown dropdown-submenu"> <a href="#" title="Prehrambena industrija">Prehrambena industrija</a> <ul class="dropdown-menu"> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Pivare">Pivare<i class="fa fa-angle-right"></i></a> <ul class="dropdown-menu"> <li><a href="#">Option 1</a> </li> <li><a href="#">Option 2</a> </li> </ul> </li> </ul> </li> </ul> </li> 

Answer 1

您只需要使用jQuery的find()選擇元素的直接后代 。

試試這個，注意$(this).find('> .dropdown-menu') ：

$(document).ready(function() {
  $(".dropdown, .dropdown-active").hover(function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

這是完整的演示：

 $(document).ready(function() { $(".dropdown, .dropdown-active").hover(function() { $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500); }); }); 

 <script src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet" /> <div class="container"> <header> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li class="dropdown dropdown-submenu"> <a href="#" title="Prehrambena industrija">Prehrambena industrija</a> <ul class="dropdown-menu"> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Pivare">Pivare<i class="fa fa-angle-right"></i></a> <ul class="dropdown-menu"> <li><a href="#">Option 1</a> </li> <li><a href="#">Option 2</a> </li> </ul> </li> </ul> </li> </ul> </li> </header> </div> 

Answer 2

您只需要編輯jquery代碼即可。

$(document).ready(function() {
    $(".dropdown, .dropdown-active").hover(function() {
        $(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeIn(500);
    }, function() {
        $(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeOut(500);
    });
});

因此該腳本僅在第一個元素上運行。 https://jsfiddle.net/IA7medd/63Lfgjnm/

Answer 3

您正在使用.find遍歷菜單的所有后代。 您只需在注釋中添加“下一層”，所以您應該使用.children因為這不會遍歷下一層。

$(document).ready(function() {
  $(".dropdown, .dropdown-active").hover(function() {
    $(this).children('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).children('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

參考： https : //api.jquery.com/children/