gpt4 book ai didi

javascript - 两个 jquery 函数在点击时起作用,但是在一起

转载 作者:行者123 更新时间:2023-11-30 15:36:53 24 4
gpt4 key购买 nike

因此,当我单击一次时,它会执行两个 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>

最佳答案

如您所见,当您附加多个处理程序时,它们都会同时执行。相反,附加一个处理程序并改为调用 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>

关于javascript - 两个 jquery 函数在点击时起作用,但是在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41403155/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com