<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

	*{margin:0; padding:0;}

	body{font-size: 14px; font-family: "Microsoft Yahei"}

	.box{ overflow: hidden; width: 600px; margin:50px auto 0; }

	.box dl{ overflow: hidden;border:1px solid #ddd; margin-bottom: 10px; }

	.box dt{ height: 30px; line-height: 30px; text-align: center; background: #ebebeb}

	.box dd{ border-top:1px solid #ddd; overflow: hidden; padding: 10px; display: none; }

	.red{ color: red; }

	.size{ font-size: 20px; }

	</style>

</head>

<body>

<div class="box" id="box">

 <dl>

 	<dt>标题一</dt>

 	<dd>感觉看了感觉离开房间大概立法看到警方扣留官方看了几个历代封建国库里的风景</dd>

 </dl>

 <dl>

 	<dt>标题二</dt>

 	<dd>感觉看了感觉离开房间大概立法看到警方扣留官方看了几个历代封建国库里的风景</dd>

 </dl>

 <dl>

 	<dt>标题三</dt>

 	<dd>感觉看了感觉离开房间大概立法看到警方扣留官方看了几个历代封建国库里的风景</dd>

 </dl>

 </div>

 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

 <script type="text/javascript">

$(function(){

	$("#box").find('dt').click(function(){

		$(this).toggleClass("red size");

		$(this).next('dd').toggle();

	})

})

 </script>

</body>

</html>

　　如图所示：

toggleClass，toggle切换的更多相关文章

  1. vue中toggle切换的3种写法

    前言:查看下面代码,在任意编辑器中直接复制粘贴运行即可 1:非动态组件(全局注册2个组件,借用v-if指令和三元表达式) <!DOCTYPE html> <html> < ...

  2. 针对小程序for循环绑定数据，实现toggle切换效果（交流QQ群：604788754）

    如有更好的方法实现,可以留言或加群交流学习.谢谢(交流QQ群:604788754) WXML: <block wx:for="{{datanum}}" wx:for-inde ...

  3. [javascript]Dom操作笔记

    1.为一个节点同时设置多个属性 $("div[aria-describedby='F53_batch_history']").attr({"display":& ...

  4. jq 切换功能toggle

    ---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...

  5. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  6. jquery toggleclass方法

    给元素更改样式,一般使用 addClass() 和removeClass() jquery官方文档 对 addClass的介绍: Adds the specified class(es) to eac ...

  7. jQuery知识点一 each()和toggleClass()

    jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element))         inde ...

  8. addClass() 和 toggleClass()

    addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...

  9. uGUI练习(九) Toggle Button

    练习目标 练习单选框,多选框 Toggle Group:Toggle容器 Toggle:单一的选项 练习步骤 1.创建一个Panel,命名TogglePanel,添加Toggle Group组件,可以 ...

随机推荐

  1. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 13—Clustering 聚类

    Lecture 13 聚类 Clustering 13.1 无监督学习简介  Unsupervised Learning Introduction 现在开始学习第一个无监督学习算法:聚类.我们的数据没 ...

  2. windows系统mysql-5.7.19官方绿色版zip包安装教程

    环境: 系统环境 Windows 10 64位 mysql版本 5.7.19 一.万变不离的下载 下载页面:https://dev.mysql.com/downloads/mysql/ 点击 Down ...

  3. Opencv3 形态学操作

    #include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...

  4. hdcloud SOA架构

    SOA是一个范式   多租户技术 一个租户可以是任何一个应用--或者是企业内部应用,或外部应用,它需要有自己的安全的和排他的虚拟计算环境.该环境包含了从存储到用户界面的所有或者某些选定的企业架构层.所 ...

  5. mysql存储过程和触发器

    mysql编程(存储过程和触发器) 存储过程 什么是存储过程 存储过程,带有逻辑的sql语句 存储过程特点 执行效率非常快!存储过程是在数据库的服务器端执行的!!! 移植性很差!不同数据库的存储过程是 ...

  6. Perl 学习笔记－输入输出

    1.读取标准输入<STDIN>(行输入操作=> 读取一行直到换行符) chomp($line = <STDIN>); # 读取一行并去掉最后的换行符(不会自动去掉) pr ...

  7. ArcGIS中地图导出格式比较（转）

    转自:http://blog.sina.com.cn/s/blog_6438c8360101eqfx.html   有人问过这样的问题,用于出挂图的地图格式应该怎么选择?熟悉ArcGIS的用户都知道, ...

  8. aspnetcore的那些actionresult们

    比MVC5多了n个actionresult,傻傻分不清,整理了下,妈妈再也不用担心了 https://docs.asp.net/projects/api/en/latest/autoapi/Micro ...

  9. OpenSSH免密码登录SSH2

    SSH2免密码登录OpenSSHhttp://blog.csdn.net/aquester/article/details/23836299 两个SSH2间免密码登录http://blog.csdn. ...

  10. C# Timer 用法

    System.Timers.Timer,通过.NET  Thread  Pool实现的,轻量,计时精确,对应用程序.消息没有特别的要求. using Timer = System.Timers.Tim ...