Question

我的菜单下拉菜单有问题，希望任何人都可以提供帮助。 https://www.zzpstart.nl/

当我单击“菜单”以打开下拉菜单时，所有工作正常（我在后台覆盖并打开了菜单），如果我单击“菜单”以关闭所有菜单，则所有工作正常（但菜单和覆盖关闭）菜单我关闭了下拉菜单，这很好，但仍会覆盖活动pff。

这是脚本Im在使用：

$(document).ready(function(jQuery) {

    $('.drop-btn').on('click', function(e) { 

        if ($(this).hasClass("uk-open")) {
            $("body").addClass('drop');
            $(".overlay").addClass('active');
        } else {
            $("body").removeClass('drop');
            $(".overlay").removeClass('active');
        }
   })
});

谢谢！

Answer 1

通常不需要检查状态。只需切换相关的类即可。

$('.drop-btn, .overlay').click(function() { 
    $('body').toggleClass('drop');
    $('.overlay').toggleClass('active');
});

请注意，我还将遮罩类也添加到了单击选择器中。

Protip：JS单引号，HTML双引号。节省一些调试和转义。

Answer 2

if ($("#overlay")[0]){
    console.log('the menu is open');
    $(".overlay").removeClass('active');
    $("body").removeClass('drop');
} else {
    console.log('the menu is not open');
}

发生的事情是，这些类没有被删除，因为它们是在您单击时设置的，但您没有在逻辑上将其删除的逻辑

Answer 3

仅用这段代码和检查员的代码很难回答。但是，当您在下拉菜单之外单击时，似乎没有添加任何onclick事件。您可以考虑使用此：

$('#overlay').on('click', function(e) { 
    $('body').toggleClass('drop');
    $('.overlay').toggleClass('active');
});

如果您单击该代码，它将删除您的叠加层。但是，由于您在标头上添加了z-index，因此可以在覆盖图上方浏览，因此单击标头不会删除该覆盖图。您应该考虑制作覆盖整个标题的标题，也可以考虑在其中包含twi div，使其透明，呈深色，因为您不能使用选择器$('#overlay, , .tm-header')，因为菜单按钮位于标题内。您也可以考虑使用$(':not(.uk-dropdown)')之类的选择器，但不确定结果。

Answer 4

感谢大家为我提供帮助！我尝试了所有建议和所有工作:)，但我选择了@isherwood，因为它真的很简单。

现在，当我在同一页面上有真正的专家时：）我不得不再问一个有关该菜单第二部分的问题。

在下拉菜单中，我有一个由Wordpress父/子页面组成的选项卡菜单..因此，我在此处调用侧边栏（小工具页面）以显示所有页面，然后添加了脚本以使其成为选项卡菜单。 >

$('#pages-2 > ul > li.page_item_has_children').on('click', function (event) { 
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('ul > li.page_item_has_children ul.children').hide();
    $($(this).attr('href')).show();
});
$('#pages-2 > ul > li.page_item_has_children:first').trigger('click');

因此，使用该脚本，我单击了父链接以显示带有子页面的ul。

这非常适合我需要的东西（一如既往）我还有另一个问题 -我必须以某种方式在ul.children中显示父链接，因为我也需要链接到父页面。甚至更多>加上父页面标题。

有人有什么建议吗：）

感谢您一次！

下拉菜单覆盖

4 个答案: