javascript - 单击打开菜单关闭其他菜单

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(或像盒子一样的卡片，并且不是彼此相邻的 sibling 。因此很难压缩代码。必须为每个菜单提供自己的点击功能。

不好意思。很高兴看到我哪里出了问题。

fiddle --> 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)来检测点击它们以关闭打开的菜单。

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

希望对你有帮助