jquery toggle()切换显示或隐藏匹配元素
【toggle()】
show()与hide()是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle()用于切换显示或隐藏匹配元素
如果没有参数,toggle()方法是最简单的方法来切换一个元素可见性
通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。如果元素是最初显示,它会被隐藏,如果隐藏的,它会显示出来。display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $('#dd').click(function(){ // toggle()用于切换显示或隐藏匹配元素 $('#tt').toggle(); }) }) </script> </head> <body> <input type="button" name="dd" id="dd" value="点击我呀" /> <br /><br /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201905041556934410176698.jpg" alt="" id="tt"/> <h1>我们学习一下,点上面的按钮实现显隐功能</h1> </body> </html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知