Question

意图：

点击（#clickme）后，DIV向下滑动并进入视图，（var isclicked = true）
当（var isclicked = true）和点击（#clickme）时，DIV向上滑动（var isclicked = false）
当（var isclicked = true）和DIV在视图中时，单击$（'html'）会向上滑动DIV并且（var isclicked = false）

问题：当DIV处于slideDown位置时（var isclicked = true），点击$（'html'）时会一直触发。我错过了什么，所以点击o f $（'html'）只会触发WHILE DIV（var isclicked = true）

var isclicked = false; 
$('#clickme').click(function(event){
  doslider();       
  console.log(isclicked);    
  if(isclicked == true){
     $('html').click(function(event){
         console.log('is box opened? '+isclicked);
     });        
  } 
});


function doslider(){     
 if(isclicked == false){    
     $('#myslider').slideDown('slow');         
       isclicked = true;                
 }else{
     $('#myslider').slideUp('slow');
       isclicked = false;          
 }   
 return isclicked; }

JSFiddle：http://jsfiddle.net/7Zfwx/92/

Answer 1

请记住先停止（并完成）上一个动画：

if(isclicked == false){    
    $('#myslider').stop(true, true).slideDown('slow');
      isclicked = true;       
}else{
    $('#myslider').stop(true, true).slideUp('slow');
      isclicked = false;   
}

演示：http://jsfiddle.net/maniator/7Zfwx/94/

Answer 2

抛弃全局isClicked var，只使用slideToggle：

$("#clickme").click(function(e) {
    e.stopPropagation();
    $("#myslider").slideToggle("slow");
});

$("body").click(function() {
    $("#myslider").is(":visible") ? $("#myslider").slideUp("slow") : 0
});

演示：http://jsfiddle.net/7Zfwx/103/

Answer 3

使用$('body')代替$('html')

see this JSFiddle

$（'html'）。点击另一个点击事件后的事件

3 个答案: