两个jquery函数一起工作点击，但一起

所以，当我点击一次它做的两个Jquery代码...我想它，当我点击它滑下来，并保持下去，直到我再次点击，如何？两个jquery函数一起工作点击，但一起

我试过click1和click2但它不理想。我也试着给他们其他的ID，但它不合逻辑。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel").slideDown(1500); 
    }); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel").slideUp(1500); 
    }); 
}); 
</script> 


<style> 
#panel, #flip { 
    padding: 5px; 
    text-align: center; 
    background-color: #e5eecc; 
    border: solid 1px #c3c3c3; 
} 

#panel { 
    padding: 50px; 
    display: none; 
} 
</style> 
</head> 
<body> 

<div id="flip">Click to slide down panel</div> 
<div id="panel">Hello world!</div> 

</body> 
</html>

来源

2016-12-30 Abdulrahman Algarni

$(document).ready(function(){ 
    $("#flip").click(function(){ 
     if($('#panel').is(':visible')){ 
      $("#panel").slideUp(1500); 
     }else{ 
      $("#panel").slideDown(1500); 
     } 
    }); 
});

来源

2016-12-30 21:58:52

正如你所看到的，当你连接多个处理程序都运行在同一时间。相反，请附加一个处理程序并改为拨打slideToggle()。

另请注意，您可能需要在该处添加对stop()的调用，以便在快速单击该元素时，动画不会排队。试试这个：

$(document).ready(function() { 
 
    $("#flip").click(function() { 
 
    $("#panel").stop(true).slideToggle(1500); 
 
    }); 
 
});

#panel, 
 
#flip { 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: #e5eecc; 
 
    border: solid 1px #c3c3c3; 
 
} 
 
#panel { 
 
    padding: 50px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="flip">Click to slide down panel</div> 
 
<div id="panel">Hello world!</div>

来源

2016-12-30 21:59:48

这是一个比我的更好的解决方案。 –

的问题是，有绑定到div两个click事件。相反，您需要跟踪状态（即isUp或isDown）并使用一个单击处理程序执行此操作。像这样：

$(document).ready(function(){ 
    var isDown = false; 
    $("#flip").click(function(){ 
     if(!isDown){ 
      $("#panel").slideDown(1500); 
      isDown = true; 
     } else { 
      $("#panel").slideUp(1500); 
      isDown = false; 
     } 
    }); 
});

来源

2016-12-30 22:01:18

两个jquery函数一起工作点击，但一起

回答

相关问题