Question

我有一个基本的JQuery脚本，当你点击 - 从而显示它们 - 通过切换来改变几个div。

<script type="text/javascript">
     $('#content_display').click(function() {
         $(this).toggleClass('selected');
         $('#content_display_selector_container').toggle();
     });
</script>

但是 - 要调用偶数，您只需要点击ID为“content_display”的第一个主div。

我的问题是：如果用户也点击了BODY，我怎么能使用JQuery隐藏这些更改 - 即如果你点击了，div会回到原来的隐藏状态？

感谢您帮助JQuery clutz！

Answer 1

这样的事情应该有效：

$('body').click(function(e) {
    if (!$(e.target).is('#content_display')) {
        $('#content_display').removeClass('selected');
        $('content_display_selector_container').hide();
    }
});

Answer 2

嘿 - 找到了这样做的方法 - 有人认为有更好的方法吗？

结果如下：

<script type="text/javascript">
   var mousetrap = false;
   $('body').click(function() {
       if (mousetrap == false) {
          $('#content_display').removeClass('selected');
          $('#content_display_selector_container').hide();
        }
   });
   $('#content_display').hover(function() {
         mousetrap = true;
   },function(){
         mousetrap = false;
});
     $('#content_display').click(function() {
           $(this).toggleClass('selected');
           $('#content_display_selector_container').toggle();
     });
</script>

JQuery - 也会触发点击更改

2 个答案: