jQuery hide() 和 show()
show()方法显示隐藏的元素
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="jquery-2.2.0.min.js"></script>
5 <script type="text/javascript">
6 $(document).ready(function(){
7 $("#hide").click(function(){
8 $("p").hide();
9 });
10 $("#show").click(function(){
11 $("p").show();
12 });
13 });
14 </script>
15 </head>
16 <body>
17 <p id="p1">如果点击"隐藏"按钮，我就会消失。</p>
18 <button id="hide" type="button">隐藏</button>
19 <button id="show" type="button">显示</button>
20 </body>
21 </html>
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="jquery-2.2.0.min.js"></script>
5 <script type="text/javascript">
6 $(document).ready(function(){
7 $("button").click(function(){
8 $("p").hide(1000);
9 });
10 });
11 </script>
12 </head>
13 <body>
14 <button type="button">隐藏</button>
15 <p>这是一个段落。</p>
16 <p>这是另一个段落。</p>
17 </body>
18 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="jquery-2.2.0.min.js"></script>
5 <script type="text/javascript">
6 $(document).ready(function(){
7 $(".ex .hide").click(function(){
8 $(this).parents(".ex").hide("slow");
9 });
10 });
11 </script>
12 <style type="text/css">
13 div.ex
14 {
15 background-color:#e5eecc;
16 padding:7px;
17 border:solid 1px #c3c3c3;
18 }
19 </style>
20 </head>
21
22 <body>
23
24 <h3>中国办事处</h3>
25 <div class="ex">
26 <button class="hide" type="button">隐藏</button>
27 <p>联系人：张先生<br />
28 北三环中路 100 号<br />
29 北京</p>
30 </div>
31
32 <h3>美国办事处</h3>
33 <div class="ex">
34 <button class="hide" type="button">隐藏</button>
35 <p>联系人：David<br />
36 第五大街 200 号<br />
37 纽约</p>
38 </div>
39
40 </body>
41 </html>
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
可规定"slow"、"fast" 或毫秒
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="jquery-2.2.0.min.js"></script>
5 <script type="text/javascript">
6 $(document).ready(function(){
7 $("button").click(function(){
8 $("p").toggle("1000");
9 });
10 });
11 </script>
12 </head>
13 <body>
14 <button type="button">切换</button>
15 <p>这是一个段落。</p>
16 <p>这是另一个段落。</p>
17 </body>
18 </html>
时间： 2024-12-09 16:46:09