Question

我的问题如下 - 我需要一个jquery hide / show，如toggle（）来隐藏和显示div。如果我点击该div之外我需要它隐藏（），如果我在里面点击它，我希望它留下。我将在其中有表格，我想如果点击/输入它们 - 的孩子们div，div留下来。

我试过这个 -

$(document).ready(function(){
    $("#dropdown-btn").click(function(){
        $(this).find("#dropdown").toggle();
    });
});
$(document).on("click", function(event){
    var $trigger = $(".dropdown-btn");
    if($trigger !== event.target && !$trigger.has(event.target).length){
        $(".dropdown").hide();
    }            
});

JSfiddle

Answer 1

我相信这就是你要找的东西。

首先，您的$(".dropdown")选择器应为$("#dropdown")。
其次，$(this).find("#dropdown")永远不会起作用，因为元素是兄弟而不是孩子。请改用原始$("#dropdown")。
然后，您还需要检查click事件，即您没有点击按钮本身。我通过将$("#dropdown-btn")[0]分配给trigger，然后使用trigger !== event.target检查它不是目标来完成此操作。请注意[0]是必需，因为您需要定位原始HTML元素，而不是jQuery对象。

$(document).ready(function() {
  $("#dropdown-btn").click(function() {
    $("#dropdown").toggle();
  });
  $(document).on("click", function(event) {
    var trigger = $("#dropdown-btn")[0];
    var dropdown = $("#dropdown");
    if (dropdown !== event.target && !dropdown.has(event.target).length && trigger !== event.target) {
      $("#dropdown").hide();
    }
  });
});

#dropdown {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="dropdown-btn">Click</button>
<div id="dropdown">
  <p>Hello</p>
</div>

希望这有帮助！：）

Answer 2

尝试event.stopPropagation()

 $(document).ready(function(){


$("#dropdown-btn").on('click', function(event){
 event.stopPropagation();
 $("#dropdown").toggle();


});



$(document).on("click", function(event){
event.stopPropagation();
$("#dropdown").hide();      


});


});

如果点击它外面的JQuery切换菜单hide（）

2 个答案: