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>