jquery如何在同一按钮上点击实现隐藏/显示之间的切换

2020-05-26 | 士人网络 | 997 次

　　在很多应用中，都有这样的功能，点击同一个按钮可以实现div的隐藏或者显示，当然操作的并非必须是按钮或者div，不过原理是一样的，下面天水网络公司小编就通过代码实例介绍一下如何实现此功能的方法。

　　方法一：通过toggle事件实现

<!doctype html=""><cke:html><cke:head><cke:encoded>%3Cmeta%20charset%3D%22%20utf-8%22%3E</cke:encoded><cke:title><a data-cke-saved-href="'/'" href="'/'" target="'_blank'" _href="'/'"><a data-cke-saved-href="'/'" href="'/'" target="'_blank'" _href="'/'">士人网络</a></a></cke:title><cke:encoded>%3Cstyle%20type%3D%22text%2Fcss%22%3E%23thediv%7B%20%20width%3A250px%3B%20%20height%3A50px%3B%20%20background-color%3Ared%3B%7D%3C%2Fstyle%3E%3C!--%7Bcke_protected%7D%253Cscript%2520type%253D%2522text%252Fjavascript%2522%2520src%253D%2522%252FjQuery%252Fjquery-1.8.3.js%2522%253E%253C%252Fscript%253E--%3E%3C!--%7Bcke_protected%7D%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253E%2524(document).ready(function()%257B%2520%2520%2524(%2522%2523bt%2522).toggle(function()%257B%2520%2520%2520%2520%2524(%2522%2523thediv%2522).hide()%2520%2520%2520%2520%2524(%2522%2523bt%2522).val(%2522%25E7%2582%25B9%25E5%2587%25BB%25E6%2598%25BE%25E7%25A4%25BA%2522)%253B%2520%2520%257D%252Cfunction()%257B%2520%2520%2520%2520%2524(%2522%2523thediv%2522).show()%2520%2520%2520%2520%2524(%2522%2523bt%2522).val(%2522%25E7%2582%25B9%25E5%2587%25BB%25E9%259A%2590%25E8%2597%258F%2522)%253B%2520%2520%257D)%2520%2520%257D)%253B%253C%252Fscript%253E--%3E%3C%2Fhead%3E%3Cbody%3E%3Cdiv%20id%3D%22thediv%22%3E%3C%2Fdiv%3E%3Cinput%20type%3D%22button%22%20id%3D%22bt%22%20value%3D%22%E7%82%B9%E5%87%BB%E9%9A%90%E8%97%8F%22%2F%3E%3C%2Fbody%3E%3C%2Fhtml%3E%3C%2Ftextarea%3E%3Cp%3E%09%E3%80%80%E3%80%80%E9%9C%80%E8%A6%81%E5%BC%BA%E8%B0%83%E7%9A%84%E6%98%AF%EF%BC%8Ctoggle()%E5%9C%A8jquery1.8%E7%89%88%E6%9C%AC%E4%B9%8B%E5%90%8E%E5%B7%B2%E7%BB%8F%E8%A2%AB%E6%B7%98%E6%B1%B0%E4%BA%86%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BD%A0%E4%BD%BF%E7%94%A8%E4%BA%86%E9%AB%98%E7%89%88%E6%9C%AC%E8%BF%99%E7%A7%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E4%B8%8D%E4%BA%86%E3%80%82%3C%2Fp%3E%3Ch3%3E%09%E3%80%80%E3%80%80%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E9%80%9A%E8%BF%87slideToggle()%20%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%3C%2Fh3%3E%09%E3%80%80%E3%80%80%3Ctextarea%20class%3D%22daima%22%20style%3D%22height%3A350px%22%3E%3Chtml%3E%3Chead%3E%3C!--%7Bcke_protected%7D%253Cscript%2520type%253D%2522text%252Fjavascript%2522%2520src%253D%2522%252Fjquery%252Fjquery.js%2522%253E%253C%252Fscript%253E--%3E%3C!--%7Bcke_protected%7D%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253E%2524(document).ready(function()%257B%2520%2520%2524(%2522.btn1%2522).click(function()%257B%2520%2520%2524(%2522p%2522).slideToggle()%253B%2520%2520%257D)%253B%257D)%253B%253C%252Fscript%253E--%3E%3C%2Fhead%3E%3Cbody%3E%3Cp%3E%E8%BF%99%E9%87%8C%E6%98%AF%E7%82%B9%E5%87%BB%E5%90%8E%E8%A2%AB%E9%9A%90%E8%97%8F%E6%88%96%E6%98%BE%E7%A4%BA%E7%9A%84%E6%96%87%E5%AD%97%3C%2Fp%3E%3Cbutton%20class%3D%22btn1%22%3E%E9%9A%90%E8%97%8F%2F%E6%98%BE%E7%A4%BA%3C%2Fbutton%3E%3C%2Fbody%3E%3C%2Fhtml%3E%3C%2Ftextarea%3E%3Cp%3E%09%E3%80%80%E3%80%80%E8%BF%99%E7%A7%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E6%B4%81%EF%BC%8C%E4%BD%86%E5%85%B6%E7%BC%BA%E9%99%B7%E6%98%AF%26ldquo%3B%E9%9A%90%E8%97%8F%26rdquo%3B%E3%80%81%26ldquo%3B%E6%98%BE%E7%A4%BA%26rdquo%3B%E6%96%87%E6%9C%AC%E7%9A%84%E5%88%87%E6%8D%A2%E5%8D%B4%E6%97%A0%E6%B3%95%E5%AE%9E%E7%8E%B0%E3%80%82%3C%2Fp%3E%3Ch3%3E%09%E3%80%80%E3%80%80%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9A%E9%80%9A%E8%BF%87click%E4%BA%8B%E4%BB%B6hide()%E5%92%8Cshow()%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%3C%2Fh3%3E%09%E3%80%80%E3%80%80%3Ctextarea%20class%3D%22daima%22%20style%3D%22height%3A350px%22%3E%3C!doctype%20html%3E%3Chtml%3E%3Chead%3E%3Cmeta%20charset%3D%22utf-8%22%3E%3Ctitle%3E%E6%97%A0%E6%A0%87%E9%A2%98%E6%96%87%E6%A1%A3%3C%2Ftitle%3E%3Cstyle%3E.button%7Bpadding%3A5px%2010px%3Bcolor%3A%23fff%3Bbackground%3A%23f00136%3Bcursor%3Apointer%3B%7D%3C%2Fstyle%3E</cke:encoded></cke:head><cke:body>隐藏 <ul id="cc"><li><a data-cke-saved-href="#" href="#" title="<a data-cke-saved-href='/' href='/' target='_blank'><a data-cke-saved-href='/' href='/' target='_blank'>士人网络</a></a>" _href="#">网站首页</a></li><li><a data-cke-saved-href="#" href="#" title="网站建设" _href="#">网站建设</a></li><li><a data-cke-saved-href="#" href="#" title="网站优化" _href="#">网站优化</a></li><li><a data-cke-saved-href="#" href="#" title="客户案例" _href="#">客户案例</a></li><li><a data-cke-saved-href="#" href="#" title="资讯中心" _href="#">资讯中心</a></li><li><a data-cke-saved-href="#" href="#" title="网络营销" _href="#">网络营销</a></li><li><a data-cke-saved-href="#" href="#" title="业务在线" _href="#">业务在线</a></li><li><a data-cke-saved-href="#" href="#" title="关于我们" _href="#">关于我们</a></li><li><a data-cke-saved-href="#" href="#" title="网站续费" _href="#">网站续费</a></li></ul></cke:body></cke:html></!doctype>

　　这种方法是我们推荐的方法，不过您可根据自己的项目情况来选择使用哪一种。当然，除了上述三种，还有其他的实现方法，如通过css()或addClass()添加css样式display:block或display:none来达到项目需求。

相关热词搜索：jquery,同一按钮,点击,隐藏,显示,切换

上一篇：网站logo怎样的设计比较好 LOGO设计技巧看这里
下一篇：企业网站制作过程中需要考虑一些问题