Question

我试图隐藏div，当1）点击某些其他div时，并且当2）页面边缘上的空白空间被点击时，任何div都不包含空格。我已经完成了第一部分，但我不知道如何做第二部分。当点击div之外的任何内容时，我不希望div隐藏。就在点击空白区域时。

这里只是一个简单的jsfiddle。

这是我正在使用的基本jsquery。我可以添加一些会使＆＃34; text1＆＃34;或＆＃34; text2＆＃34;当用户点击空格时消失？

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

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

Answer 1

您只需将特定类添加到将被单击的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      
    }      
});

DEMO：https://jsfiddle.net/tjrsvbuc/3/

Answer 2

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

$(document).mouseup(function (e)
{
    var container = $("#text1, #text2");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.slideUp(300);
    }
});

Updated Fiddle

Answer 3

希望您希望在javascript 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);
  });

点击任何div之外的空白区域时在jsquery中触发事件

3 个答案: