Question

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

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

＆＃13;

$(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});
      }
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

请尽可能详细，我还在学习这一点，我很容易感到困惑。

谢谢！

Answer 1

请检查一下。如果您的滑块已打开，您单击它将关闭的任何位置。如果您的滑块已打开，则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>

Answer 2

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

＆＃13;

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
      });
    }
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

：How do I detect a click outside an element?

Answer 3

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

在其他地方点击时滑出隐藏

3 个答案: