jquery - 通过点击切换文字内容

今天要写一个简单的显示/隐藏效果，本以为是挺简单的事儿，没想到还真因为基本功不扎实遇到了问题，这里跟大家分享一下。

百度了很多方法，精简能用的干货实在太少，最后还是通过去查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>

这样一来就清爽很多啦。

 

posted @ 2016-04-11 15:41  wong。  阅读(5275)  评论(0)  编辑  收藏  举报