JQuery тело: нет() не работает

Question

Я хочу slideToggle в #display DIV нажав #button DIV, а также slideUp в #display DIV, нажав на теле, но когда я нажмите на #display Div не будет 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() не то, что вы хотите использовать здесь. Что бы это могло сделать, так это вернуть каждый элемент тела, идентификатор которого не отображается. То, что вы должны сделать вместо этого сделать это нормальное событие тела щелчка, а затем проверить, если идентификатор того, что вы выбрали это дисплей в том, что, так что это будет не только влиять на элементы тела:

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