Javascript 超级下拉菜单

我创建了一个大菜单，但我不精通javascript/jquery。 我已经申请了。滑动切换以在单击时显示下拉列表。如果有人在打开第二个下拉菜单时单击第二个下拉菜单，我想自动关闭第一个下拉菜单。我在这里问之前试过谷歌。下面是我使用的脚本以及到Codepen的链接

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

$(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");
})
})

---

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

我想根据您的代码笔链接，您正在寻找

$(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");
    });
});

---

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

我认为应该这样做

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");
    });
  }
});
});

---

非常感谢您的回答，如果有人点击住房金融，我希望“关于我们”关闭，住房金融下拉列表的内容应该会出现。希望澄清，并对混淆表示抱歉。：）