Question

我有一个按钮#clickme。单击时，div #cart会向上滑动，再次单击时会向下滑动。

除了#cart或#clickme之外，我还希望能够通过点击页面上的任何其他位置来关闭它。

我尝试过的代码并不常用。现在发生的事情是，当我点击#clickme时，它会向上滑动然后再快速返回。

我想现在发生的事情是，在文档和#clickme级别触发click事件，导致一个效果接着另一个。

这是一个优雅的方式吗？

$('#clickme').click(function() {
   if ($("#cart").is(":hidden")) {
       $("#cart").slideDown("slow");
   } else {
       $("#cart").slideUp("slow");
   }
});

$(document.body).click(function () {
   if ($("#cart").not(":hidden")) {
       $("#cart").slideUp("slow");
   } 
});

Answer 1

正如jAndy所述，问题是事件冒泡在这里，但是你问自己“有更优雅的方式”，是的，有：）

如果我们利用.slideToggle()和:visible selector，您的代码确实非常简洁，您可以这样做：

$('#clickme').click(function(e) {
  $("#cart").stop(true, true).slideToggle("slow");
  e.stopPropagation();
});

$(document).click(function () {
  $("#cart:visible").stop(true, true).slideUp("slow");
});

.slideToggle() 几乎几乎你正在做的检查，不同之处在于检查它何时到达，所以在排队动画的情况下它甚至更好。使用:visible我们只选择#cart如果它可见且需要向上滑动，否则没有选择。 .stop()调用只是为了阻止动画排队以获得快速点击，测试它并查看您想要的行为，这部分是可选的。

最后event.stopPropagation()调用是为了防止点击事件冒泡到文档并触发它的.click()处理程序，（click here for more info on that）。

Answer 2

由于您将click event绑定到document.body，您的click event绑定到#clickme 冒泡到文档并触发您的处理程序。

您需要在.stopPropagation()事件处理程序中调用#clickme：

$('#clickme').click(function(e) {
   e.stopPropagation();

   if ($("#cart").is(":hidden")) {
       $("#cart").slideDown("slow");
   } else {
       $("#cart").slideUp("slow");
   }
});

这会阻止click event冒泡DOM。

Sitenote：您应该认真阅读缓存DOM引用。你在那段小代码中查询完全相同的元素，就像6次一样。做一次

var $cart = $('#cart');

并从那里使用$cart。那里可以获得很多表现。

示例：http://www.jsfiddle.net/EuzyL/1/

Answer 3

试试这个，

var toggleThis = function() {
   if ($("#cart").is(":hidden")) {
       $("#cart").slideDown("slow");
   } else {
       $("#cart").slideUp("slow");
   }
};

$('#clickme').click(toggleThis);
$('#clickme').blur(toggleThis);

$(document.body).click(function () {
   if ($("#cart").not(":hidden")) {
       $("#cart").slideUp("slow");
   } 
});

快乐编码。

我想点击一个按钮切换div slideUp＆amp; slideDown并快速在页面上的任何其他位置关闭div

3 个答案: