jquery show hide 没有按预期工作答案

【问题标题】：jquery show hide not working as intendedjquery show hide 没有按预期工作
【发布时间】：2014-08-24 07:24:33
【问题描述】：

我的效果是，当单击按钮时，html/span 会滑出。这工作就好了。然后，当我希望用户在按钮或 html/span 之外单击时，html/span 将隐藏。隐藏部分也可以工作，但是当我再次尝试该过程时，我必须双击按钮才能显示幻灯片效果。我怀疑我的订单有误或……有人能帮帮我吗？

$(document.body).ready(function () {

  $(".comment_function").on("click", function () {
      $(".comment_confirm").show(400,"linear");
  });

  $(document.body).on("click", function () {
      if (!$(".comment_function").closest(".comment_confirm").length) {
          if ($(".comment_confirm").is(":visible") ) {
              $(".comment_confirm").hide();
          }
      }
  });

});

不知道为什么代码在小提琴中不起作用，但它非常接近我现在所拥有的
Fiddle

【问题讨论】：

使用 jsfiddel 显示你想做什么
每次有人点击页面上的任何内容时，您都会运行第二次点击处理程序... 哎哟！ 为什么不将其设为$.one() 并在@ 中创建它987654325@点击处理程序
@saurav 我已经上传到小提琴，但代码不起作用。它仍然非常接近我现在所拥有的
@PatrickGunderson 我对 jquery 还很陌生，对此感到抱歉 :( 将其设为 $.one() 是什么意思？
检查jsfiddle.net/5mnm47cb/9

标签： jquery show-hide

【解决方案1】：

只需监听来自document 的点击事件，并检查点击的元素是否为.one。如果是，显示.two，否则隐藏它。

$(document).on('click', function (e) {
  var t = $(e.target);
  if (t.hasClass('one')) {
    $('.two').show(400, 'linear');
  } else {
    $('.two').hide();
  }
});

【讨论】：

谢谢 :)，当你首先回答我想要的内容时，我会支持你的 :)

【解决方案2】：

这是我想出的：使用“事件”对象的目标属性来获得点击 -

$(document).bind("click", function (e) {
  var clickedElement = $(e.target);
    console.log($(e.target));
    if (clickedElement.hasClass('one') || clickedElement.hasClass('two')) {
      console.log("one");
    $('.two').show(400, 'linear');
  } else {
      console.log("two");
    $('.two').hide();
  }
  });

按预期工作。

http://jsfiddle.net/5mnm47cb/12/

【讨论】：

【解决方案3】：

我也刚刚启用了单击。你应该试试这个：

$(document).ready(function () {
   $(document).on("click", function (e) {
      if (!$(".comment_function").closest(".comment_confirm").length) {
          if ($(".comment_confirm").is(":visible") ) {
              $(".comment_confirm").hide();
          }
      }
   });

   if($(e.target).is('.comment_function'))
       $(".comment_confirm").show();
});

这里正在工作Fiddle

【讨论】：