1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7.     <meta content="yes" name="apple-mobile-web-app-capable" />
  8.     <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  9.     <meta content="telephone=no" name="format-detection" />
  10.     <style type="text/css">
  11.         *{margin:0;padding:0;}
  12.         body{max-width: 640px; margin: 0 auto; font-family: 'Microsoft Yahei'}
  13.         .box{ overflow: hidden; }
  14.         .box dl{ overflow: hidden; margin-bottom: 10px; border: 1px solid #ddd; }
  15.         .box dt{ height: 45px; line-height: 45px; padding: 0 10px; background: #FADFF6; font-size: 18px; position: relative; cursor: pointer;}
  16.         .box dt span{ display: block; width: 0; height: 0; border-left:8px solid transparent; border-right: 8px solid transparent;  position: absolute;right: 10px; top:15px; border-top: 8px solid #98479B}
  17.         .box dt span.on{
  18.                 transform: rotate(180deg);
  19.                 -ms-transform: rotate(180deg);
  20.                 -moz-transform: rotate(180deg);
  21.                 -webkit-transform: rotate(180deg);
  22.                 -o-transform: rotate(180deg);
  23.             }
  24.         .box dd{ overflow: hidden; padding: 10px; line-height: 34px; display: none;border-top: 1px solid #ddd;  }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="box" id="box">
  29.     <dl>
  30.         <dt>买书是最划算的投资<span></span></dt>
  31.         <dd style="display: block;">
  32.             <p>古人云：“书中自有黄金屋，书中自有颜如玉。”这说明先贤们早认识到，买书是最划算的投资。</p>
  33.             <p>我刚出道时，拿着非常微薄的工资。有一次向主管抱怨道：“现在的书真贵啊，这点工资连饭都吃不起，更别说买书了！”主管对我说：“不要吝惜买书的钱，宁可忍着不吃饭，也不要忍着不买书，因为买书是回报率最高的投资。”</p>
  34.             <p>主管的话让我非常震动。后来，我看到喜欢的书时，再也没有手软过。通过不断学习，我的开发能力不断提高，工资水平也大幅提高。一年后，我一个月工资的涨幅，就足够买两年的书了。你说，还有比这更划算的投资吗？</p>
  35.             <p>一本书，哪怕只有一页纸是有用的，它所将产生的潜在价值，也会远远超过书本身的价格。当然，书不在多，踏踏实实消化掉一本好书，比泛泛而读10本普通书，要有价值得多。</p>
  36.         </dd>
  37.     </dl>
  38.     <dl>
  39.         <dt>只学习与工作相关的东西<span></span></dt>
  40.         <dd>
  41.             <p>我曾发现不少程序员在学习方面找不到方向，一会儿学学C#，一会儿学学Java，看了最新的编程语言排行榜，又觉得该学C++。这样左抓抓，右挠挠，只会让你觉得更痒。</p>
  42.             <p>学习最忌三心二意。俗话说：“伤其十指不如断其一指”，每门都学一点，还不如专心学好一个方向。这个道理谁都懂，可是又该学哪个方向呢？难道只能跟着感觉走吗？不！最实际的方向，应该跟着工作走，工作需要什么，我们就学什么，把工作需要的技能熟练掌握，有很多好处。</p>
  43.             <p>首先，可以集中精力，在某一方面钻研得更加深入。所谓“百招会不如一招绝”，有了绝招，你还怕不能在“武林”立足吗？《天龙八部》中的慕容复武功博学无比，最后还不是被只会一招六脉神剑的段誉打得落花流水？</p>
  44.             <p>其次，可以学得更快、更深入，因为学习更具有针对性，而且可以立即在工作中运用，可以马上检验出学习的效果。对存在的问题进行深入研究，掌握的知识也会更加牢固。</p>
  45.         </dd>
  46.     </dl>
  47. </div>
  48. <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  49. <script type="text/javascript">
  50.     $(function(){
  51.         var obj = $('#box');
  52.         obj.find('dt').on('click',function(){
  53.             var thisSpan = $(this).children('span');
  54.             if(!thisSpan.hasClass('on')){
  55.                 obj.find('dt').children('span').removeClass('on');
  56.                 obj.find('dd').hide();
  57.                 thisSpan.addClass('on');
  58.                 $("html,body").scrollTop(thisSpan.offset().top-10);
  59.                 $(this).siblings("dd").show();
  60.             }else{
  61.                 thisSpan.removeClass('on');
  62.                 $(this).siblings('dd').hide();
  63.             }
  64.         })
  65.     })
  66. </script>
  67. </body>
  68. </html>

如图所示：

二、单个的展开收缩

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{margin:0;padding:0;}
  8.         .m_zi_tips{width: 300px; border:1px solid red; padding:10px; height: 40px; overflow: hidden;}
  9.         .m_zi_cur{ height: auto }
  10.         .m_zi_showicon{ background: red; width: 10px; height: 10px; overflow: hidden; }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="m_zi_tips">
  15.         属牛的人性格:牛年出生的人――勤勉踏实。性格：沉默寡言，为人正直，纯朴，不愿伪装表面，富于耐性的同情心，具有勤劳，努力、坚毅的习惯，思考力强，坚持己见，容易失去益友，有老大气概，做事很精细，晚年将鸿图大展。
  16.     </div>
  17.     <a href="javascript:;" class="J_showtips"><span>展开</span></a>
  18.     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  19.     <script type="text/javascript">
  20.         $('.J_showtips').on('click',function(e){
  21.             if(!$('.m_zi_cur').length>0){
  22.                 $('.m_zi_tips').addClass('m_zi_cur');
  23.                 $(this).find('span').text("收起");
  24.                 $(this).addClass('m_zi_showicon')
  25.             }else{
  26.                 $('.m_zi_tips').removeClass('m_zi_cur');
  27.                 $(this).find('span').text("展开");
  28.                 $(this).removeClass('m_zi_showicon')
  29.             }
  30.         });
  31.     </script>
  32.  
  33. </body>
  34. </html>

效果图：

jquery展开收缩列表的更多相关文章

  1. 微信小程序 - 展开收缩列表

    代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}" ...

  2. jQuery展开收缩2

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  3. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  4. 可展开的列表组件——ExpandableListView深入解析

    可展开的列表组件--ExpandableListView深入解析 一.知识点 1.ExpandableListView常用XML属性 2.ExpandableListView继承BaseExpanda ...

  5. SlickGrid example 5:带子项的展开收缩

    带子项的展开收缩.   代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  6. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

  7. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  8. max-height实现任意高度元素的展开收缩动画

    http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...

  9. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

随机推荐

  1. [iOS]UIScrollView嵌套UITableView，超出屏幕的cell点击不了问题

    最初我是用UIScrollView嵌套了一个UIView,然后UIView里面嵌套UITableView,这样cell 就会超出屏幕那一部分点击不了. 解决方法如下,UITableView拖出来,作为 ...

  2. node模块示例

    来源于慕课网课程:http://www.imooc.com/video/6701 (视频) 模块的流程图如下: 做一个学校的模块示例 建一个学生的js studet.js function add(s ...

  3. Linux实战教学笔记28：企业级LNMP环境应用实践

    一,LNMP应用环境 1.1 LNMP介绍 大约在2010年以前,互联网公司最常用的经典Web服务环境组合就是LAMP(即Linux,Apache,MySQL,PHP),近几年随着Nginx Web服 ...

  4. Unmarshaller解析xml文件

    参考地址:http://linbulu.iteye.com/blog/2295919 Girl.xml文件 <?xml version="1.0" encoding=&quo ...

  5. Ros学习——Cmakelists.txt文件解读

    1.过程 .Required CMake Version (cmake_minimum_required) //CMake 需要的版本 .Package Name (project()) //#定义工 ...

  6. c# ？和？？

    先看如下代码: string strParam = Request.Params["param"]; if ( strParam== null ) {     strParam= ...

  7. 关于防SQL注入敏感词过滤问题

    关于对字符的过滤问题sql查询条件过滤掉单引号是否就安全了呢? 在文章最后一段管理员做了敏感字符的过滤,管理员过滤掉了空格,而攻击者通过 /**/ 来代替空格绕过了过滤字符.感觉很有成就感,呵呵呵呵. ...

  8. Openssl verify命令

    一.简介 verify命令对证书的有效性进行验证,verify 指令会沿着证书链一直向上验证,直到一个自签名的CA 二.语法 openssl verify [-CApath directory] [- ...

  9. Windows下redis的安装与使用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  10. Smarty简介

    Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码逻辑分离. ...