Javascript 使用jQuery单击页面中的某个位置时，是否关闭下拉菜单？

我有一个简单的下拉菜单，显示在内联文本链接上。我使用jQuery单击事件在单击链接时显示下拉菜单

我想做的是让下拉菜单返回到隐藏状态时，点击任何地方。现在，您必须再次单击链接以关闭菜单

演示

jQuery

// Show Dropdown Menu when link is clicked
$(function(){
  $(".inline-dropdown-menu").click(function(e){
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
  });
});

HTML

试试这个

$(function(){
  $(".inline-dropdown-menu").click(function(e){
e.stopPropagation();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
 });

$("body").click(function(e){
$(".inline-dropdown-menu-list").hide();
});

});

---

如果我理解正确，您希望在单击主体时复制下拉箭头所做的操作。如果是这样，请尝试以下方法：

$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});

链接到。 但请注意，如果再次单击主体，它将再次显示下拉列表。如果你不想，你可以随意删除它。

这可能有用：

var flag = false;

$(".inline-dropdown-menu").click(function(e){
    $(".inline-dropdown-menu-list").not(':hidden').hide();
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
    flag = true;   
});

$('body').click(function(){
    if (flag) {
        flag = false;
        return;
    }

    $(".inline-dropdown-menu-list").not(':hidden').hide();
});

---

当您的链接被单击时，您必须向正文中添加一个单击事件。单击body时，可以隐藏下拉列表，也可以再次删除body上的事件。我使用了setTimeout来防止双击。我还向主体上的单击事件（click.ddls）添加了一个名称空间，这样您就可以有其他的单击事件

因此，请查看此演示：

---

如果没有唯一的类名，您可以遍历它们并检查它们是否可见，如果可见，则关闭它。这段代码不起作用（抱歉），但有望为您指明正确的方向。我个人喜欢使用

on（“click”）

vs

click（）

来处理DOM尚未访问的动态元素

     $('*').not(".inline-dropdown-menu").on("click", function(){
         $('.inline-dropdown-menu-list').each(function() {
             if ($(this).is(":visible")) {
                 $(this).toggle();
             }                                                                 
         });

---

您还可以基于

$（'.inline下拉菜单列表'）.length创建计数器，并为每个计数器分配
数据id
，以便匹配和跟踪它们。希望这有帮助
 当在链接上单击多次时，该操作无效truely@Kermani请参阅更新的回答。。为什么？所有其他答案在整个过程中都会在主体上分配一个单击事件，这是不好的，因为它会填满内存。而且，并没有人使用名称空间…好的，我删除了否决票。但当我点击身体时，它又不工作了@Kermani它确实可以在JSFIDLE页面上工作，但是如果您检查文档，您可以看到IFrame不是很高，因此在该演示中，您必须确保您正在短IFrame区域内单击主体，尽管
e.stopPropagation（），但它似乎可以工作似乎是魔法的所在is@jasondavis是的
var flag = false;

$(".inline-dropdown-menu").click(function(e){
    $(".inline-dropdown-menu-list").not(':hidden').hide();
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
    flag = true;   
});

$('body').click(function(){
    if (flag) {
        flag = false;
        return;
    }

    $(".inline-dropdown-menu-list").not(':hidden').hide();
});

// Show Dropdown Menu when link is clicked
$(function(){

  $(".inline-dropdown-menu a").click(function(e){
      e.preventDefault(); // Stop navigation
      $("body").off("click.ddls");
      $(".inline-dropdown-menu-list").toggle();

      //to prevent double click
      setTimeout(function(){
          $("body").on("click.ddls", function(){
              console.log("body clicked");
              $(".inline-dropdown-menu-list").hide();
              $("body").off("click.ddls");
          });
      }, 300);
  });

});

     $('*').not(".inline-dropdown-menu").on("click", function(){
         $('.inline-dropdown-menu-list').each(function() {
             if ($(this).is(":visible")) {
                 $(this).toggle();
             }                                                                 
         });