Javascript 打开菜单单击关闭其他菜单

我一直在努力获得一个按钮上的弹出菜单。 此菜单有7个按钮，位于不同容器中的页面上。到目前为止，您可以单击按钮并打开菜单

每个菜单打开时都有其自己的版本，可以使用，但效率不高：

$('.country-btn-portugal').click(()=>{
      $(".dropdowna").toggleClass('active'); 
    });
 $('.country-btn-uk').click(()=>{
          $(".dropdowna").toggleClass('active'); 
        });

……等等。。。x7，每个按钮菜单一个

我曾尝试在单击某个项目时关闭菜单，但无法使用：

//close if menu <a> is clicked
    $('#mclose').click(()=>{ 
    $('.dropdown').removeClass('active');
    });

我希望这也能解决问题，当1个菜单打开时，你的下一次点击是另一个菜单，所以你都打开了

菜单按钮将服务于单独的div（或卡片状的框），并且不是相邻的兄弟。因此发现很难压缩代码。必须为每个菜单提供自己的单击功能

真是一团糟，对不起。如果能看到我在这里出了什么问题，那就太好了

小提琴-->

一张“卡片”和一个“菜单按钮”的html结构

葡萄牙签证
这里有文字

由于按钮和菜单标记似乎总是同级的，因此如果在所有下拉列表中添加一个公共类，则可以更轻松地获得所有这些标记的列表。如下所示：

<div id="mcontainer" class="dropdown dropdowna">

以下是您的小提琴的更新，以演示：

---

好吧，我会这样做的

以下是最新的

这个脚本就足够了

//打开菜单
$（'.tablabel'）。单击（函数（事件）{
$（'.tablabel'）.not（this）.next（）.removeClass（“活动”）
$（this）.next（）.toggleClass（“活动”）
});
//单击菜单时关闭
$（“.dpd”）。单击（函数（e）{
$（this.toggleClass（“活动”）
})
//如果没有单击菜单，请关闭

您可以尝试使用promise（）.done（），并查看html类。这是一个供您使用的工具：

对元素使用承诺可以让您等待代码完成执行，然后再启动新的元素。以下是代码：

     //open menu
     const buttons = $('.country-btn');
     const dropDownMenus = $('.dropdownmenu');
     const dropDownItems = $('.dropDownItem')

     buttons.click(function() {
       dropDownMenus.removeClass('active');
       $(this).next('div').promise().done(function() {
         $(this).toggleClass('active');
       });
     });
     //close if menu clicked
     dropDownItems.click(function() {
       dropDownMenus.removeClass('active');
     });

---

希望对你有所帮助

George，太好了。非常简短。更好地理解下一个，不在乎物理位置，它是它找到的下一个标签。谢谢。很高兴这很有帮助：）考虑接受和投票，如果页面被点击，你会如何关闭菜单？需要多挣一些ReP来投票，但是当它出现的时候会回来给你。看看这个答案，谢谢你的帮助和建议，所以最好去做“γID1，γID2，γID3 {CSS代码}，而不是重复使用同一个ID。

<div id="mcontainer" class="dropdown dropdowna">

function fnClick(e){
    var $dd = $(this).next();
    $('.dropdown').not($dd).removeClass('active');
    $dd.toggleClass('active');
}

//open menu
$('.country-btn-portugal').click(fnClick);
$('.country-btn-uk').click(fnClick);

     //open menu
     const buttons = $('.country-btn');
     const dropDownMenus = $('.dropdownmenu');
     const dropDownItems = $('.dropDownItem')

     buttons.click(function() {
       dropDownMenus.removeClass('active');
       $(this).next('div').promise().done(function() {
         $(this).toggleClass('active');
       });
     });
     //close if menu clicked
     dropDownItems.click(function() {
       dropDownMenus.removeClass('active');
     });