文字内容展开与折叠jquery代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>折叠与展开jquery代码</title>
<script src="http://www.kuantoo.com/com/js/tingyun.js"></script>
<script>
$(document).ready(function() {
$("a.ckmore").toggle(function(){
var id = $(this).parents(".gdmore").attr("id");
$(this).css({'background':'url(http://www.kuantoo.com/com/imgs/xiala2.png) no-repeat right center'})
$("#"+id).find(".zzjj").css({'height':'auto'});
},function(){
var id = $(this).parents(".gdmore").attr("id");
$("#"+id).find(".zzjj").css({'height':'120px'});
$(this).css({'background':'url(http://www.kuantoo.com/com/imgs/xiala1.png) no-repeat right center'});
})
});
</script>
</head>
<body>
<style type="text/css">
/**公用样式*/
html, body, div, dl, dd, dt, ul, ol, li, a, i, form, input, p ,h1 ,select { margin:0; padding:0; font-size:12px; font-family:"微软雅黑",Arial,"Microsoft YaHei"}
a { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-decoration:none; cursor:pointer; color:#2d2e2d}
i { display:-moz-inline-stack; display:inline-block; font-style:normal}
input[type=button], input[type=submit], input[type=reset] { -webkit-appearance:none}
textarea { resize:none}
ul, ol { list-style:none}
:focus { outline:none}
img { border:0px none}
select, input ,textarea { vertical-align:middle; border:#ccc solid 1px;}
span, font, b{ display:-moz-inline-stack; display:inline-block;}
table { table-layout:fixed; border-collapse:collapse; height:auto;}
b{ font-weight:normal;}
/* 工具样式 */
.fl { float:left}
.fr { float:right}
.clear { clear:both}
.psa { position:absolute}
.psr { position:relative}
.psf { position:fixed}
.vam { vertical-align:middle}
.vat { vertical-align:top}
.cp { cursor:pointer}
.db { display:block}
.di { display:inline-block}
.hide { display:none}
.tal { text-align:left}
.tac { text-align:center}
.tar { text-align:right}
.oh { overflow:hidden}
.oxs { overflow:hidden; overflow-x:scroll}
.oys { overflow:hidden; overflow-y:scroll}
.ha { height:auto; overflow:auto}
.ml10 { margin-left:10px}
.ml15 { margin-left:15px}
.ml20 { margin-left:20px}
.mt10 { margin-top:10px}
.mt15 { margin-top:15px}
.mt20 { margin-top:20px}
.mr10 { margin-right:10px}
.mr15 { margin-right:15px}
.mr20 { margin-right:20px}
.marginauto { margin:0 auto;}
.width1200 { width:1200px; }
.width1000 { width:1000px; }
.seldizhi{border:1px solid #c8c8c8;height:38px;width:840px;margin-top:30px;}
.seldizhi li{float:left;}
.seldizhi a{font-size:14px;color:#787878;line-height:38px;width:70px; background:url(../imgs/febgersde.png) no-repeat left center;}
.seldizhi a:hover{color:#fff; background-color:#3fc3f2;}
.seldizhi a.curr{color:#fff; background-color:#3fc3f2;}
.seldizhi li:first-child a{ background-image:none;}
.leftzp dl{width:340px;margin-top:60px;}
.leftzp dt{font-size:24px;color:#00a6f3;}
.leftzp .gwzz{font-size:18px;color:#323232;margin:10px 0 6px;}
.leftzp p{font-size:14px;color:#636363;line-height:30px;}
.leftzp .ckmore{color:#9e9e9e;font-size:14px; background:url(http://www.kuantoo.com/com/imgs/xiala1.png) no-repeat right center;padding-right:20px;}
.leftzp dd.ddtop{margin-top:8px;}
.leftzp dd.zzjj{height:120px;}
.leftzp dd.ljbm span{width:200px;height:1px; background:#d7d7d7;}
.leftzp dd.ljbm input{width:90px;height:30px;font-size:14px;color:#fff; background:#3fc3f2;border:0 none;margin-left:30px;border-radius:2px; cursor:pointer}
</style>
<div class="leftzp fl">
<dl class="gdmore" id="gdmore1">
<dt>前台文员</dt>
<dd class="gwzz">岗位职责：</dd>
<dd class="zzjj oh">
<p>1、及时、准确接听/转接电话，记录留言并及时转达；</p>
<p>2、接待来访客人并及时准确通知被访人员；</p>
<p>3、收发公司邮件、报刊、传真和物品。并做好登记管理以及专递工作；</p>
<p>3、收发公司邮件、报刊、传真和物品。并做好登记管理以及专递工作；</p>
<p>3、收发公司邮件、报刊、传真和物品。并做好登记管理以及专递工作；</p>
</dd>
<dd class="ddtop"><a class="ckmore">查看更多</a></dd>
<dd class="ljbm"><span></span><input type="button" name="baom" value="立即报名"></dd>
</dl>
<dl class="gdmore" id="gdmore2">
<dt>前台文员</dt>
<dd class="gwzz">岗位职责：</dd>
<dd class="zzjj oh">
<p>1、及时、准确接听/转接电话，记录留言并及时转达；</p>
<p>2、接待来访客人并及时准确通知被访人员；</p>
<p>3、收发公司邮件、报刊、传真和物品。并做好登记管理以及专递工作；</p>
<p>3、收发公司邮件、报刊、传真和物品。并做好登记管理以及专递工作；</p>
<p>3、收发公司邮件、报刊、传真和物品。并做好登记管理以及专递工作；</p>
</dd>
<dd class="ddtop"><a class="ckmore">查看更多</a></dd>
<dd class="ljbm"><span></span><input type="button" name="baom" value="立即报名"></dd>
</dl>
</div>
</body>
</html>
文字内容展开与折叠jquery代码的更多相关文章
- visual studio 2005/2010/2013/2015/2017 vc++ c#代码编辑常用快捷键-代码编辑器的展开和折叠
visual studio 2005/2010/2013/2015/2017 vc++ c#代码编辑快捷键-代码编辑器的展开和折叠 VS2015代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代 ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- C# 展开和折叠代码的快捷键（总结）
C# 展开和折叠代码的快捷键 VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + ...
- C# 展开和折叠代码的快捷键
C# 展开和折叠代码的快捷键 VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + ...
- jQuery 文本段落展开和折叠效果
jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- JQuery EasyUI treegrid展开与折叠，以及数据加载两次的问题
问题:做项目的时候遇到代码生成的页面,只默认展开了一级节点,每次操作之后刷新还要手动一级一级展开,太麻烦了 官方API:http://www.jeasyui.net/plugins/186.html ...
- HTML 学习笔记 JQuery（锋利的JQuery 代码）
一 制作简单的导航栏 <html> <head> <meta charset="UTF-8"> <title></title& ...
- js_css_dl.dt实现列表展开、折叠效果
第一种方式:不提倡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- LINUX设置SUID，SGID，Stick bit
前面介绍过SUID与SGID的功能,那么,如何打开文件使其成为具有SUID与SGID的权限呢?这就需要使用数字更改权限了.现在应该知道,使用数字 更改权限的方式为“3个数字”的组合,那么,如果在这3个 ...
- Leetcode90. Subsets II子集2
给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [1,2,2], [2 ...
- TZ_05_Spring_annotation常见注解
Spring常用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...
- 关于CE的反思
当你注视着你的分数, 眼眶倏地猛睁. 不会做的题血红一片, 认真做了的题一点墨蓝. 你知道, 你CE了, 你挂了, 你倒数第一了, 你当场去世了. 两小时的努力付诸东流, 线段树的碎片历历在目. 思考 ...
- spring cloud深入学习(一)-----什么是微服务？什么是rpc？spring cloud简介
近年来,微服务非常的流行,那么为什么是它?简单介绍一下. 为什么是微服务? 微服务架构是一种将单应用程序作为一套小型服务开发的方法,每种应用程序都在其自己的进程中运行,并与轻量级机制(通常是HTTP资 ...
- MyBatis 动态sql标签trim
https://blog.csdn.net/zhangxing52077/article/details/75041053 序列序号在Mybatis中的使用的使用 将获得序列值获取返回到对象code字 ...
- Vue2.0史上最全入坑教程（中）—— 脚手架代码详解
书接上文我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码. 回顾下创建后的项目目录: 说明:在*.vue文件,template标签里写html代码,且t ...
- 说说a标签的onclick和href
在平时我们一般会在列表中的最后一列给加上操作功能,一般的操作功能是修改和删除,这个操作我们可以通过a标签来实现其功能. <a class="pn-opt" href=&quo ...
- JS---案例：手风琴 （利用封装好的动画函数）
案例:手风琴 封装好的动画函数在common.js里面 //function getStyle(element, attr) {...} //function animate( ...
- 使用Gradle构建项目
使用gradle构建项目之前,咱们先聊聊maven,使用maven构建项目和配置主要 接下来正式使用gradle来构建项目的和步骤: 1.下载源码 2.下载gradle 1.下载地址:https:// ...