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（或类似盒子的卡片，而不是彼此相邻的兄弟姐妹。因此发现难以压缩代码。必须为每个菜单提供自己的点击功能。

这是一个混乱的抱歉。很高兴看到我在这里出错了。

小提琴 - ＆gt; 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类（如果有）。

其次，你可以在menue项目上使用一个类（因为我已经添加了一个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可让您在启动新代码之前等待代码完成执行。这是代码：

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);   // Clear screen
    ....

希望有所帮助

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

3 个答案: