Question

所以，当我点击一次它同时执行两个Jquery代码...我希望它在我的时候点击它向下滑动并保持向下直到我再次点击，如何？

我尝试了click1并点击了2，但这并不理想。我也尝试给他们其他身份，但这不符合逻辑。

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

Answer 1

正如您所见，当您附加多个处理程序时，它们都会同时执行。相反，请附加一个处理程序并改为调用slideToggle()。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

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

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

两个jquery函数在click上工作，但是在一起

3 个答案: