Javascript 单击任何div之外的空白时在jsquery中触发事件

我试图隐藏一个div，当1）单击某些其他div时，以及当2）单击页面边距上的空白时，任何div都不包含空白。我已经涵盖了第一部分，但我不知道如何执行第二部分。我不想在单击div之外的任何内容时隐藏该div。就在单击空白空间时

这里有一个简单的游戏

下面是我使用的基本jsquery。我可以添加一些东西，当用户单击空白时，会使“text1”或“text2”消失吗

$("#2").click(function() {
   $('#text1').slideUp(300);
});

$("#1").click(function() {
   $('#text2').slideUp(300);
});

---

我找到了这个美丽的解决方案：

---

希望这是您在javascript

e.stopPropagation（）中寻找的添加事件

您只需将特定类添加到将被单击的div项中，即可执行以下操作：

$(document).click(function (event) {//when anywhere is clicked on the page    
    if (!$(event.target).hasClass('MyClass')) {//if the clicked item has this class
        $('#text2').slideUp(300);//hide     
        $('#text1').slideUp(300);//hide      
    }      
});

演示：
实际上，我以前试过这个。单击除div之外的任何内容时，它都会隐藏div。任何空格，但任何其他div也是。所以这不起作用。在我的实际文件中不起作用。。。当div在click事件之后出现时，此代码会导致它立即再次崩溃。但是除了这个bug之外，我希望代码专门针对no div所包含的空间。看起来我必须在这个代码中指定css中的每个div id，它才能以这种方式工作。在我的实际项目中，我有比1和2多得多的div id，你知道：）@user2985093查看更新，然后你可以为这些div分配相同的类，并使用
hasClass
对，我支持你。但是请注意，在这篇更新的文章中，当单击指定类之外的空白时，div不会发生任何变化。我想在单击不包含的空间时折叠div。这应该可以做到，但在我的项目中，div正在打开，然后立即折叠（确实是这段代码导致了折叠）。触发slideDown的事件是单击具有特定类的图像。我尝试将其作为第二个类应用，一个id（更改为hasId）。没什么区别…我把它缩减到这个。非常感谢您的帮助它看起来确实漂亮整洁，但是当在中实现时，它只会导致文本立即折叠。。我添加了一个事件“e”，为了停止崩溃..我添加了e.stopPropagation（）；功能。。所以在那之后，它将停止崩溃
$(document).ready(function(){
                $("#1").click(function(e){
                    e.stopPropagation(); 
                    $("#text1").slideDown(300);
                });
            });

$(document).ready(function(e){
                $("#2").click(function(e){
                    e.stopPropagation(); 
                    $("#text2").slideDown(300);
                });
            });

$("#2").click(function() {
                $('#text1').slideUp(300);
            });

$("#1").click(function() {
                $('#text2').slideUp(300);
            });

$("body").click(function() {
    $('#text1').slideUp(300);
    $('#text2').slideUp(300);
  });

$(document).click(function (event) {//when anywhere is clicked on the page    
    if (!$(event.target).hasClass('MyClass')) {//if the clicked item has this class
        $('#text2').slideUp(300);//hide     
        $('#text1').slideUp(300);//hide      
    }      
});