當(dāng)前位置：首頁(yè) > 網(wǎng)站建設(shè) > 網(wǎng)站建設(shè)知識(shí) > 正文

jquery如何在同一按鈕上點(diǎn)擊實(shí)現(xiàn)隱藏/顯示之間的切換

時(shí)間:2020-05-26 | 來(lái)源:士人網(wǎng)絡(luò) | 關(guān)注: 724 次

　　在很多應(yīng)用中，都有這樣的功能，點(diǎn)擊同一個(gè)按鈕可以實(shí)現(xiàn)div的隱藏或者顯示，當(dāng)然操作的并非必須是按鈕或者div，不過(guò)原理是一樣的，下面天水網(wǎng)絡(luò)公司小編就通過(guò)代碼實(shí)例介紹一下如何實(shí)現(xiàn)此功能的方法。

　　方法一：通過(guò)toggle事件實(shí)現(xiàn)

<!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="'/'">士人網(wǎng)絡(luò)</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'>士人網(wǎng)絡(luò)</a></a>" _href="#">網(wǎng)站首頁(yè)</a></li><li><a data-cke-saved-href="#" href="#" title="網(wǎng)站建設(shè)" _href="#">網(wǎng)站建設(shè)</a></li><li><a data-cke-saved-href="#" href="#" title="網(wǎng)站優(yōu)化" _href="#">網(wǎng)站優(yōu)化</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="網(wǎng)絡(luò)營(yíng)銷" _href="#">網(wǎng)絡(luò)營(yíng)銷</a></li><li><a data-cke-saved-href="#" href="#" title="業(yè)務(wù)在線" _href="#">業(yè)務(wù)在線</a></li><li><a data-cke-saved-href="#" href="#" title="關(guān)于我們" _href="#">關(guān)于我們</a></li><li><a data-cke-saved-href="#" href="#" title="網(wǎng)站續(xù)費(fèi)" _href="#">網(wǎng)站續(xù)費(fèi)</a></li></ul></cke:body></cke:html></!doctype>

　　這種方法是我們推薦的方法，不過(guò)您可根據(jù)自己的項(xiàng)目情況來(lái)選擇使用哪一種。當(dāng)然，除了上述三種，還有其他的實(shí)現(xiàn)方法，如通過(guò)css()或addClass()添加css樣式display:block或display:none來(lái)達(dá)到項(xiàng)目需求。

相關(guān)熱詞搜索： jquery,同一按鈕,點(diǎn)擊,隱藏,顯示,切換

jquery如何在同一按鈕上點(diǎn)擊實(shí)現(xiàn)隱藏/顯示之間的切換

方法一：通過(guò)toggle事件實(shí)現(xiàn)

相關(guān)閱讀

　　方法一：通過(guò)toggle事件實(shí)現(xiàn)