javascript - 在同一个导航栏中有两个下拉菜单

Question

正如我在问题标题中所说，我创建了一个带有两个下拉框的导航栏。问题是当我试图用悬停打开一个菜单时(它只与一个下拉框完美配合)，第二个菜单同时打开。这是我创建的脚本。任何建议都会很高兴地被接受!

<script>
$(document).ready(function () {
    $(".dropdown").hover(
      function () {
    $("ul.dropdown-menu").slideDown("medium").stop(true,true);
      }, 
      function () {
    $("ul.dropdown-menu").slideUp("medium").stop(true,true);
      }  
    );
});
</script>

Answer 1

这是因为 $("ul.dropdown-menu") 是所有属于 dropdown-menu< 类的 ul 元素的 jQuery 对象表示。 $(".dropdown") 也是如此。

您可以使用 each()来解决这个问题。

Iterate over a jQuery object, executing a function for each matched element.

在回调函数中，使用$(this)访问每个jQuery对象和:eq获取 $("ul.dropdown-menu") 的第 n 个对象(它是从 0 开始的，所以第一个对象是 :eq(0))。 .

var a =0;
$(".dropdown").each(function(){
   var b = a;
   $(this).hover(function () {
      $("ul.dropdown-menu:eq("+b+")").slideDown("medium").stop(true,true);
   }, function() {
      $("ul.dropdown-menu:eq("+b+")").slideUp("medium").stop(true,true);
   });
   a++;
});