jQuery body：not（）not working

Question

私は#display divをクリックして#display divをトグルし、さらに本体をクリックして#display divをスライドアップします。#display divをクリックすると、スライドアップしません。

$(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()ここで使用したいものではありません。それは、IDが表示されていないすべてのbody要素を返すことです。

$(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

はこれを試してみてください：

$(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>

あなたが代わりにやるべきことはそれだけで体の要素に影響を与えないように、あなたがクリックしたかのIDが、その中に表示されるかどうかを確認、その後、その正常な身体クリックイベント作りであります