Question

我创建了一个Mega菜单，我并不精通javascript / jquery。我已经应用.slideToggle来显示点击下拉列表。如果有人点击第二个下拉列表同时带来第二个下拉列表，我想自动关闭第一个下拉列表。在问这里之前我试过谷歌。下面是我使用的脚本以及Codepen的链接。

Codepen link for Mega Menu

任何帮助将不胜感激。非常感谢。

$(function(){
$(".about").click(function(){
    $(".mainSub").slideToggle("slow");
    $(".one").toggleClass("aboutClick");       
})
$(".hf").click(function(){
    $(".hfnav").slideToggle("slow");
    $(".two").toggleClass("aboutClick");
})
$(".cntct").click(function(){
    $(".three").toggleClass("aboutClick");
})
})

编辑：如果有人点击住房金融，我希望关于我们的下拉菜单关闭，住房融资下拉的内容应该会出现。

Answer 1

我认为根据您的codepen链接，您正在寻找

$(function(){
    $(".about").click(function(){
        $(".mainSub").slideToggle("slow");
        $('.mainNavSub>*').removeClass('aboutClick');
        $(".one").addClass("aboutClick");       
    });
    $(".hf").click(function(){
        $(".hfnav").slideToggle("slow");
        $('.mainNavSub>*').removeClass('aboutClick');
        $(".two").addClass("aboutClick");
    });
    $(".cntct").click(function(){
        $('.mainNavSub>*').removeClass('aboutClick');
        $(".three").addClass("aboutClick");
    });
});

它从其他对象中删除该类，并将该类添加到当前对象。

Answer 2

我认为应该这样做。

var mainSubs = $(".mainNavSub > li .mainSub");
$(function(){
$(".mainNav").on("click", ".mainNavSub > li", function() {
  var self = $(this),
      currentSub = self.find(".mainSub");

  if(currentSub.is(":visible")) {
    mainSubs.slideUp("slow");
  } else {
    $.when(mainSubs.slideUp("slow"))
     .then(function() {
       currentSub.slideDown("slow");
    });
  }
});
});

超级下拉菜单

2 个答案: