jQuery的身體：不（）不工作

Question

我希望通過單擊#button股利和也的slideToggle的#display的div通過點擊體效果基本show的#display DIV但是，當我將點擊#display的div也不會效果基本show。

$(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是內顯示，所以它不僅僅影響身體的元素：

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