jQuery 效果 - 隐藏和显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 效果 - 隐藏和显示相关的知识，希望对你有一定的参考价值。
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>
以上是关于jQuery 效果 - 隐藏和显示的主要内容，如果未能解决你的问题，请参考以下文章