admin管理员组

文章数量:1573376

点击同一按钮实现div的隐藏与现实切换:
在很多应用中，都有这样的功能，点击同一个按钮可以实现div的隐藏或者现实，当然操作的并非必须是按钮或者div，不过原理是一样的，下面就通过代码实例介绍一下如何实现此功能。
代码如下:
[HTML]  纯文本查看  复制代码 运行代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html> < html > < head > < meta charset = " utf-8" > < meta name = "author" content = "http://www.softwhy/" /> < title >蚂蚁部落</ title > < style type = "text/css" > #thediv{    width:250px;    height:50px;    background-color:red; } </ style > < script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js" ></ script > < script type = "text/javascript" > $(document).ready(function(){    $("#bt").toggle(function(){      $("#thediv").hide()      $("#bt").val("点击显示");    },function(){      $("#thediv").show()      $("#bt").val("点击隐藏");    })   }); </ script > </ head > < body > < div id = "thediv" ></ div > < input type = "button" id = "bt" value = "点击隐藏" /> </ body > </ html >

以上代码可以实现我们想要的效果，这里主要利用了toggle()函数。
特别说明: toggle()函数已经在jQuery1.9中被删除。
相关阅读:
1.toggle()函数可以参阅 jQuery的toggle()方法 一章节。
2.hide()函数可以参阅 jQuery的hide()方法 一章节。
3.val()函数可以参阅 jQuery的val()方法 一章节。
4.show()函数可以参阅 jQuery的show()方法 一章节。 

本文标签： 按钮事件Div

版权声明：本文标题：[事件处理] 点击同一按钮实现div的隐藏与显示切换 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1727747519a1127983.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。