Question

我已经有了我的代码来切换显示并隐藏div但是每当我尝试在外部点击时添加隐藏时，它会与切换代码冲突，我需要切换div_menu但是在点击外面时也会隐藏它，就像facebook一样下拉菜单

$(document).ready(function() {
    $(".toggle_menu").click(function(e) {
        $(".div_menu").toggle();
        e.preventDefault();
    });
});

Answer 1

您可以执行类似

的操作

$(document).ready(function () {
    $(".toggle_menu").click(function (e) {
        $(".div_menu").toggle();
        e.preventDefault();
    });
    $(document).click(function(e){
        if(!$(e.target).closest('.toggle_menu, .div_menu').length){
            $(".div_menu").hide();
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle_menu">toggle_menu</button>
<div class="div_menu">
  <div>some random content menu</div>
</div>
<div style="height: 100px; background: lightgrey;">some other content goes here</div>

Answer 2

使用 e.target 查找当前的目标元素，并使用 is() 检查当前匹配的元素集与选择器

$(document).ready(function () {
    $(document).click(function (e) {
        if ($(e.target).closest(".toggle_menu,.div_menu").length) {
            $(".div_menu").toggle();
            e.preventDefault();
        } else {
            $(".div_menu").hide();
        }

    });
});

<强> DEMO

Answer 3

$("body").click
(
   function(e){
      if ($(e.target).is($(".toggle_menu"))) {
        $(".div_menu").toggle();
      }else{
        $(".div_menu").hide();
      }
   }
);

Answer 4

$(document).ready(function() {
    $(".toggle_menu").click(function(e) {
        $(".div_menu").toggle();
        e.preventDefault();
    });
    $(document).click(function(e) {
        $(".div_menu").hide();
    });
});

Answer 5

试试这个

$(document).click(function(e){
    if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
        $(".div_menu").toggle();
    }
});

单击时切换div并在外部单击时隐藏

5 个答案: