为什么当我单击“隐藏”或“显示”按钮时，标签"p“不向下滑动？
为什么当我单击“隐藏”或“显示”按钮时，标签"p“不向下滑动？
提问于 2021-04-21 04:51:04
当我单击“隐藏”或“显示”按钮时，当函数是可以运行的down.But时，标签"p“不要滑动fadeToggle。当我单击“隐藏”或“显示”时，如何让标签"p“向下滑动？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("button").click
( function ()
{
// $("p").fadeToggle("slow");
// $("p").fadeTo("slow");
$("p").slideDown("slow");
}
);
}
);
</script>
</head>
<body>
<p id="p1">hello show and hide</p>
<button type="button">hide</button>
<button type="button">show</button>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-21 05:02:55
您可以将p标记隐藏在加载中，然后单击任何按钮，即:隐藏/显示，检查它是否有特定的类，具体取决于此slideDown或slideUp，您的p标记。
演示代码：
$("button").click(function() {
//check if the button has show class..
$(this).hasClass("show") ? $("p").slideDown("slow") : $("p").slideUp("slow");
});p#p1 {
display: none
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="p1">hello show and hide</p>
<!--added hide/show class-->
<button type="button" class='hide'>hide</button>
<button type="button" class='show'>show</button>
Stack Overflow用户
发布于 2021-04-21 05:03:51
您的#p1应该是隐藏的，然后才能滑落。请检查下面的代码
$(document).ready(
function() {
$("button").click(function() {
// $("p").fadeToggle("slow");
// $("p").fadeTo("slow");
$("p").slideDown("slow");
});
}
);#p1 {
display: none
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p id="p1">hello show and hide</p>
<button type="button">hide</button>
<button type="button">show</button>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67189462
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号