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

百度了很多方法，精简能用的干货实在太少，最后还是通过去查jq的官方api才找到了解决问题的方法。

简单讲就是通过jq的toggle方法分别写两个点击事件。

 <html>

 <head>

 <title>jquery - 通过点击切换文字</title>

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

 </head>

 <script>

 $(document).ready(function(){

     $(".dj").toggle(function(){

         $(".info_main").show();

         $(".dj").text("-")},

     function(){

         $(".info_main").hide();

         $(".dj").text("+")}

     );

 });

 </script>

 <body>

 <div class="info_tit">展开：<span class="dj">+</span></div>

     <div class="info_main" style="display:none">

         隐藏内容。

     </div>

 </body>

 </html>

这样一来就清爽很多啦。

jquery - 通过点击切换文字内容的更多相关文章

  1. jQuery插件之jquery editable plugin--点击编辑文字插件

    jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该 ...

  2. jquery tab点击切换的问题

    问题: 页面结构见下 <div id="wrap"> <li> <a href="#" class="active&qu ...

  3. 2-微信小程序开发(开发界面说明,按钮点击切换显示内容)

    说一个功能,大家在用微信实现控制设备的时候,是不是都在为绑定设备发愁. 我看了很多厂家的微信控制,大部分都只是可以用微信给设备配网,但是没有做用微信绑定的. 一般做绑定都是用设备的MAC地址. 这里我 ...

  4. 原生JS实现旋转轮播图+文字内容切换

    废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...

  5. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  6. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  7. [原创]Jquery实现表格内容点击隐藏显示内容

    1.首先看效果,点击红色字体,可是查看全部文字内容 2.JS实现 思路:将Ajax获得的数据,一份截取,一份不变,放到td里面,分别用span装着. 然后通过display属性,进行切换

  8. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  9. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

随机推荐

  1. ss与 netstat

    ss快的秘诀在于,它利用到了TCP协议栈中tcp_diag.tcp_diag是一个用于分析统计的模块, 可以获得Linux 内核中第一手的信息,这就确保了ss的快捷高效.当然,如果你的系统中没有tcp ...

  2. WPF非轮询方式更新数据库变化SqlDependency（数据库修改前台自动更新）

    上一章节我们讲到wpf的柱状图组件,它包含了非轮询方式更新数据库变化SqlDependency的内容,但是没有详细解释,现在给大家一个比较简单的例子来说明这部分内容. 上一章节: WPF柱状图(支持数 ...

  3. android开发之ExpandableListView的使用，实现类似QQ好友列表

    由于工作需要,今天简单研究了一下ExpandableListView,做了一个类似QQ列表的Demo,和大家分享一下. 效果图如下: 先来看看主布局文件: <RelativeLayout xml ...

  4. [Form Builder]Oracle Form系统变量中文版总结大全

    转:http://yedward.net/?id=57 Form中的系统变量,它存在于一个Form的整个运行时期的会话之中,变量包含了有关Form相关属性的字节信息.有些变量标明了当前状态,还有些变量 ...

  5. 转：ORACLE制造方法的比较

    转自:http://blog.itpub.net/133041/viewspace-438549/ 1.离散制造. 2.重复制造 3.流式制造 Oracle Applications 支持离散.项目. ...

  6. Java并发——线程安全、线程同步、线程通信

    线程安全 进程间"共享"对象 多个“写”线程同时访问对象. 例:Timer实例的num成员,即add()方法是用的次数.即Timer实例是资源对象. class TestSync ...

  7. Scala可变参数列表，命名参数和参数缺省

    重复参数 Scala在定义函数时允许指定最后一个参数可以重复(变长参数),从而允许函数调用者使用变长参数列表来调用该函数,Scala中使用“*”来指明该参数为重复参数.例如: scala> de ...

  8. jquery 可拖动进度条

    实现这个效果怎么弄呢? <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  9. c中计时的几种方法

    C计时的几种方法说明及例程 1. 使用clock() 函数 头文件:<time.h> clock()函数,返回“自程序启动到调用该函数,CPU时钟的计时单元数(clock tick)” 每 ...

  10. 关于sqlserver 2008 远程导入表数据

    /*不同服务器数据库之间的数据操作*/ --创建链接服务器 exec sp_addlinkedserver   'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' ex ...