时间戳

首页 > 解决方案 > 为什么当我单击“隐藏”或“显示”按钮时标签“p”不向下滑动

javascript - 为什么当我单击“隐藏”或“显示”按钮时标签“p”不向下滑动

问题描述

当我单击按钮隐藏或显示时，标签“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>

标签： javascriptjquery

解决方案

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

推荐阅读