Question

我有一个菜单，我想在单击按钮时显示/切换，并在单击按钮旁边的文档的某些部分时隐藏。我正在尝试一些事情，你可以在这里看到：

// $('.dropdown-toggle').click(function()
// {
    // $('.dropdown-menu').show();
// });
$(document).click(function()
{
    // if ($(this).hasClass('dropdown-toggle'))
        // $('.dropdown-menu').toggle();
    if ($(this).not('[dropdown-toggle]'))
        $('.dropdown-menu').toggle();
});

如果我取消注释顶部，由于某种原因，菜单将在单击按钮旁边的文档的一部分时切换，并且在单击按钮时不会执行任何操作。如果我保留该部分的注释并取消注释第一个if语句（即使我更换了＆＃39;切换＆＃39;使用＆＃39; show＆＃39;），无论我单击文档的哪个部分，该按钮都会切换

编辑：我解决了部分问题。看起来当我取消注释顶部（下拉切换类的单击侦听器）时，菜单显示然后立即切换，因此它隐藏。如果我改变＆＃39;显示＆＃39;隐藏＆＃39;我这样做，以便菜单显示单击按钮时，否则切换。但是，我想做的几乎正好相反。我想在单击按钮时切换，仅在单击文档的其他部分时隐藏。似乎＆＃34; hasClass（）＆＃34;和＆＃34; .not（[]）＆＃34;并没有认识到下拉切换是一个被点击的东西。

Answer 1

在.toggle()处理程序中呼叫click并将其绑定到$(".dropdown-toggle");在click处理程序中，$(document)使用.hasClass()或.is()检查event.target是.dropdown-toggle，链.hide()

$(".dropdown-toggle").on("click", function() {
  $(this).toggle();
});

$(document).on("click", function(event) {
 if (!$(event.target).hasClass(".dropdown-toggle")) $(event.target).hide();
});

JavaScript - 如何在单击特定按钮之外的某些内容时运行函数？

1 个答案: