单击其他位置时滑出隐藏

Question

所以，我有一个可以在按钮上打开和关闭的滑出 div。但是我希望它在您单击远离它时关闭。所以在一个按钮上打开，当用户点击其他地方时关闭。

如何使用此代码实现这一目标？

$(document).ready(function() {
  var slider_width = $('.slider').width();
  $('#slider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated')) {
      $('.slider,#slider-button').animate({"margin-right": '-='+slider_width});
    }
    else {
      if(!$(this).is(':animated')) {
        $('.slider,#slider-button').animate({"margin-right": '+='+slider_width});
      }
    }
  });
});

.slider{
    position:fixed;
    height:100%;
    background:yellow;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#slider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background: red;
    top:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

请尽可能详细，我还在学习这个，我很容易混淆。

谢谢！

Answer 1

$(document).mouseup(function (e)
{
    var container = $("#slider-button");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Answer 2

我设计了一个方法，使用每个事件的属性path。您可以看到我在 here 上发布的原始答案。基本上它是一个“按树顺序排列其所有祖先的静态有序列表”，我的代码会检查其中是否存在元素，否则会执行一组代码，在你的情况下隐藏一个菜单。在您的情况下，它会检查两个元素，因为按钮不在菜单容器中。任何单击菜单容器中的元素都不会关闭菜单，因为它的event.path 包含容器，因为它传播到window。

var slider_width = $('.slider').width();
$('#slider-button').click(function() {
  if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
    $('.slider,#slider-button').animate({
      "margin-right": '-=' + slider_width
    });
  } else {
    if (!$(this).is(':animated')) {
      $('.slider,#slider-button').animate({
        "margin-right": '+=' + slider_width
      });
    }
  }
});

$("body").click(function() {
  target1 = $(".slider")[0];
  target2 = $("#slider-button")[0];
  flag = event.path.some(function(el) {
    return (el == target1 || el == target2)
  });
  if (!flag) {
    if ($(".slider").css("margin-right") != "-200px") {
      $('.slider,#slider-button').animate({
        "margin-right": '-=' + slider_width
      });
    }
  }
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.slider {
  position: fixed;
  height: 100%;
  background: yellow;
  width: 200px;
  right: 0px;
  margin-right: -200px;
}

#slider-button {
  position: fixed;
  width: 100px;
  height: 50px;
  right: 0px;
  background: red;
  top: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

：How do I detect a click outside an element?

Answer 3

请检查这个。如果您的滑块已打开并且您单击任何位置，它将关闭。如果您的滑块已打开，则Number($('#slider-button').css("margin-right").replace('px','')) 将给出margin-right 的值，并且该值必须大于> 0。

$(document).ready(function() {
  var slider_width = $('.slider').width();
  $('#slider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated')) {
      $('.slider,#slider-button').animate({"margin-right": '-='+slider_width});
    }
    else {
      if(!$(this).is(':animated')) {
        $('.slider,#slider-button').animate({"margin-right": '+='+slider_width});
      }
    }
  });
  
  $(document).click(function(){
    if(Number($('#slider-button').css("margin-right").replace('px',''))>0){
      $('#slider-button').click();
    }
  });
});

.slider{
    position:fixed;
    height:100%;
    background:yellow;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#slider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background: red;
    top:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>