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

Question

我一直在努力让按钮上的弹出菜单。 此菜单有 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');
    });

如果单击了不是此元素的项目（不起作用），则使用以下方法关闭菜单：

$(document).mouseup(function (e)
{
    var container = $("#oclick");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

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

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

对不起，一团糟。很高兴看到我在哪里出错了。

小提琴 --> https://jsfiddle.net/s4nk1zev/118/

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

 <div class="country_card">
        <span class="cc-t goth upperC">Portugal </span> <span class="cc-t goth upperC blued">Visa</span>
        <div class="cc-txt">
        text in here
        </div>
        <div class="cc-btn">            
            <button class="tablabel country-btn-portugal" id="portimg"></button>
            <div id="mcontainer" class="dropdowna">
                <a id="mclose" class="mclose" href="#home">Overview</a>
                <a id="mclose" href="#about">Application Process</a>
                <a id="mclose" href="#contact">Investment Options</a>
            </div>
        </div>      
    </div>   

Answer 1

好吧，这就是我会做的。

这是更新后的fiddle

这个脚本已经足够了

	     //open menu
		$('.tablabel').click(function(event){
      $('.tablabel').not(this).next().removeClass("active")
       $(this).next().toggleClass("active")
	     
	});
	 
	//close if menu clicked
	$(".dpd").click(function(e){
  
    $(this).toggleClass("active")
  })

	//close if anything  but menu clicked

它的作用是，只听按钮上的任何点击并将active 类添加到它的下一个。从所有活动元素中删除 active 类（如果有）。

其次，您可以在菜单项上使用一个类（我已经添加了一个dpd）来检测对它们的点击以关闭打开的菜单。

还有一件事。 标识符对于您使用的每个元素都必须是唯一的。我还将它们更新为独一无二的

希望有帮助

Answer 2

由于您的按钮和菜单标签似乎总是同级的，如果您向所有下拉菜单添加一个公共类，您可以更轻松地获得所有这些标签的列表。像这样：

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

另外作为一个建议，在您的文档中包含重复的 ID 确实不是一个好主意。这违反了 html 标准，并且可能会导致通过 id 获取标签时出现奇怪的问题。

一旦您在所有下拉菜单中都有一个通用类，您可以执行类似的操作来关闭所有其他下拉菜单，并切换与您单击的按钮相关的类。

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

这是你的小提琴的更新来演示： https://jsfiddle.net/s4nk1zev/143/

Answer 3

您可以尝试使用 promise().done()，并查看 html 类。这是给你的小提琴：https://jsfiddle.net/zxoLmf71/

在元素上使用 Promise 可以让您等待代码完成执行，然后再开始新的代码。这是代码：

     //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');
     });

希望对你有帮助