Question

<!DOCTYPE html>
<html>
<head>
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>

<button style="width:80%;height:35px;">Toggle between hiding and showing the      paragraphs</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

此代码隐藏并显示单击按钮时的div。这段代码工作得很好......但我希望首先隐藏div。单击后会显示。

Answer 1

在p标签中添加样式显示：无

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
     $(document).ready(function(){
        $("button").click(function(){
        $("p").toggle();
        });
     });
 </script>
 <style>
        p{
            display:none;
        }
    </style>
</head>
<body>

     <button style="width:80%;height:35px;">Toggle between hiding and showing the paragraphs</button>

    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>
</body>

单击按钮隐藏和显示div

1 个答案: