今天要寫一個簡單的顯示/隱藏效果,本以為是挺簡單的事兒,沒想到還真因為基本功不扎實遇到了問題,這里跟大家分享一下。
百度了很多方法,精簡能用的干貨實在太少,最后還是通過去查jq的官方api才找到了解決問題的方法。
簡單講就是通過jq的toggle方法分別寫兩個點擊事件。
1 <html> 2 <head> 3 <title>jquery - 通過點擊切換文字</title> 4 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 5 </head> 6 <script> 7 $(document).ready(function(){ 8 $(".dj").toggle(function(){ 9 $(".info_main").show(); 10 $(".dj").text("-")}, 11 function(){ 12 $(".info_main").hide(); 13 $(".dj").text("+")} 14 ); 15 }); 16 </script> 17 <body> 18 <div class="info_tit">展開:<span class="dj">+</span></div> 19 <div class="info_main" style="display:none"> 20 隱藏內容。 21 </div> 22 </body> 23 </html>
這樣一來就清爽很多啦。