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

Having two dropdown menus in the same nav bar

本文关键字：两个 下拉菜单 导航      更新时间：2023-09-26

正如我在问题标题中所说，我创建了一个带有两个下拉框的导航栏。问题是，当我试图用悬停打开一个菜单时(它只适用于一个下拉框(，第二个菜单同时打开。这是我创建的脚本。任何建议都会很乐意接受！

<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>
这是因为$("ul.dropdown-menu")是dropdown-menu类的所有ul元素的jQuery对象表示。$(".dropdown")也是如此。

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

在jQuery对象上迭代，为每个匹配的对象执行一个函数要素

在回调函数中，使用$(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++;
});

为每个下拉菜单提供id，并按照此中的id调用.haverage((

$("#firstDropdown").hover();
$("#secDropdown").hover();
相关文章：