jQuery Körper: nicht() nicht

Question

Arbeits Ich möchte, indem Sie auf #button div die #display div slideToggle und slideUp auch die #display div durch am Körper klicken Aber wenn ich auf #display klicken, wird div wird es nicht slideUp.

$(document).ready(function() { 
 
       $("#button").click(function(event){ 
 
        $("#display").slideToggle("1000"); 
 
        event.stopPropagation(); 
 
       }); 
 

 
       $("body").not("#display").click(function(){ 
 
        $("#display").slideUp("1000"); 
 
       }); 
 

 
      });

#display { 
 
    display: none; 
 
    height: 100%; 
 
    width:800px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    font-family: sans-serif; 
 
    color: #fff; 
 
    background: #333; 
 
    padding: 50px; 
 
} 
 

 
#button { 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
    font-family: sans-serif; 
 
    font-size: 28px; 
 
    font-weight: 600; 
 
    margin: 50px auto 0 auto; 
 
    display: block; 
 
    background: #333; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button id="button">Click here</button> 
 
     <div id="display"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas inlit fugit dolor soluta, doloribus dignissimos nobis deserunt a rerum ea! Ut repudiandae, repellat sed ad inventore cum amet reiciendis ipsum! Dolor. 
 
     </div>

Answer 1

.not() ist nicht das, was Sie hier verwenden möchten. Das würde jedes Körperelement zurückgeben, dessen ID nicht angezeigt wird. Was sollten Sie stattdessen tun, ist es ein normales Körper Click-Ereignis machen, dann überprüfen, ob die ID von dem, was Sie geklickt haben, ist Anzeige innerhalb dass, so wird es nicht nur Körperelemente beeinflussen:

$(document).ready(function() { 
    $("#button").click(function(event){ 
     $("#display").slideToggle("1000"); 
     event.stopPropagation(); 
    }); 

    $("body").click(function(event){ 
     if (event.target.id != "display") { 
      $("#display").slideUp("1000"); 
     } 
    }); 

}); 

Answer 2

Versuchen Sie folgendes:

$(document).ready(function() { 
 
       $("#button").click(function(event){ 
 
        $("#display").slideToggle("1000"); 
 
        event.stopPropagation(); 
 
       }); 
 

 
       $("body").not("#display").click(function(){ 
 
        $("#display").slideUp("1000"); 
 
       }); 
 
     $('#display').click(function(event) { 
 
     event.stopPropagation(); 
 
     }); 
 

 
      });

#display { 
 
    display: none; 
 
    height: 100%; 
 
    width:800px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    font-family: sans-serif; 
 
    color: #fff; 
 
    background: #333; 
 
    padding: 50px; 
 
} 
 

 
#button { 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
    font-family: sans-serif; 
 
    font-size: 28px; 
 
    font-weight: 600; 
 
    margin: 50px auto 0 auto; 
 
    display: block; 
 
    background: #333; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button id="button">Click here</button> 
 
     <div id="display"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas inlit fugit dolor soluta, doloribus dignissimos nobis deserunt a rerum ea! Ut repudiandae, repellat sed ad inventore cum amet reiciendis ipsum! Dolor. 
 
     </div>