效果图：

一.纯CSS实现

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>demo01</title>

     <style>

         *{

             margin:0;

             padding: 0;

         }

         a{

             text-decoration: none;

             color:#333;

         }

         ul li{

             list-style: none;

         }

         .list{

             width: 220px;

             margin: 0 auto;

             margin-top: 20px;

             border: 1px solid #ccc;

         }

         h3{

             padding-left:10px;

             padding-bottom: 2px;

             background: #ccc;

         }

         .list ul li{

             font-size: 16px;

             padding:10px;

             border-bottom: 1px dotted #ccc;

         }

         .list ul li span{

             width: 18px;

             color:#fff;

             background: #ccc;

             font-size: 14px;

             text-align:center;

             margin-right: 4px;

             display: inline-block;

         }

         .list ul li:hover dl{

             display: block;

         }

         .list ul li:hover span{

             background: #ec689c;

         }

         .list ul li:hover a{

             color:#ec6941;

         }

         .list ul li dl{

             margin-top:10px;

             font-size: 14px;

             padding-left:30px;

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="list">

         <h3>全球冷读榜</h3>

         <ul>

             <li>

                 <span>1</span><a href="javascript:;">完全图解狗的心理</a>

                 <dl>

                     <dt>完全图解狗的心理</dt>

                     <dd>作者：名小狗</dd>

                     <dd>价格：88.66</dd>

                 </dl>

             </li>

             <li>

                 <span>2</span><a href="javascript:;">完全图解狗的心理</a>

                 <dl>

                     <dt>完全图解狗的心理</dt>

                     <dd>作者：名小狗</dd>

                     <dd>价格：88.66</dd>

                 </dl>

             </li>

             <li>

                 <span>3</span><a href="javascript:;">完全图解狗的心理</a>

                 <dl>

                     <dt>完全图解狗的心理</dt>

                     <dd>作者：名小狗</dd>

                     <dd>价格：88.66</dd>

                 </dl>

             </li>

             <li>

                 <span>4</span><a href="javascript:;">完全图解狗的心理</a>

                 <dl>

                     <dt>完全图解狗的心理</dt>

                     <dd>作者：名小狗</dd>

                     <dd>价格：88.66</dd>

                 </dl>

             </li>

         </ul>

     </div>

 </body>

 </html>

二.原生JS实现

 window.onload = function(){

             var list = document.getElementsByTagName('li');

             var dl = document.getElementsByTagName('dl')

             for(let i=0; i<list.length;i++){

                 list[i].onmouseover = function(){

                     dl[i].style.display = 'block';

                 }

                 list[i].onmouseout = function(){

                     dl[i].style.display = 'none';

                 }

             }

         }

三.使用JQ

 $(function(){

             $('li').mousemove(function(){

                 $(this).children('dl').css('display','block');

                 $(this).children('span').addClass('on');//增加样式

             })

             $('li').mouseout(function(){

                 $(this).children('dl').css('display','none');

                 $(this).children('span').removeClass('on');//移除样式

             })

         })

Tips_信息列表（手风琴）效果的多种实现方法的更多相关文章

  1. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  2. Ligerui Grid组件--学生信息列表

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

  3. Android利用RecyclerView实现列表倒计时效果

    最近面试时,面试官问了一个列表倒计时效果如何实现,然后脑袋突然懵的了O(∩_∩)O,现在记录一下. 运行效果图 实现思路 实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新i ...

  4. Flutter实战视频-移动电商-33.列表页_子类和商品列表交互效果

    33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口 ...

  5. C#开发BIMFACE系列7 服务端API之获取文件信息列表

    系列目录     [已更新最新开发文章,点击查看详细] 本文详细介绍如何获取BIMFACE平台中所有上传过的文件信息列表. 请求地址:GET https://file.bimface.com/file ...

  6. HTML5 动画效果的多种实现方式

    HTML5 动画效果的多种实现方式 1.  CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...

  7. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  8. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  9. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

随机推荐

  1. MySQL中使用group_concat()函数数据字符过长报错的问题解决方法

    最近在办公软件项目,在开发权限指标遇到一个问题:我们系统的一些逻辑处理是用存储过程实现的,但是有一天客户反馈说权限指标分配报错,查了分配的权限数据牵扯到的数据权限基础资源,没有问题.权限指标分配的存储 ...

  2. MSSQL的简单盲注

    方式一:遍历ascii码的方式 一.判断数据库类型 and (select count(*) from sysobjects)>0 二.获取数据库 and ascii(substring((se ...

  3. Babel学习小记

    一.babel配置文件中的plugins和presets是什么? 1.首先说说babel是什么,babel是一个JavaScript转码器,帮助我们把浏览器不兼容的ES6语法转换成ES5语法: 2.接 ...

  4. LeetCode第二十三题-合并n个有序链表

    Merge k Sorted Lists 问题简介:合并k个已排序的链表并将其作为一个排序链表返回. 举例: 输入: [ 1->4->5, 1->3->4, 2->6 ] ...

  5. day07 数据类型间的相互转化及字符编码

    今日内容: 字符间的相互转化 字符编码 今日重点: 字符间的相互转化 """ 字符间的相互转化: """ """ ...

  6. encode与decode

    import torch from torch import nn import numpy as np import matplotlib.pyplot as plt import torch.ut ...

  7. 解决sqlite 删除记录后数据库文件大小不变

    最的做的项目中要有到sqlite数据存储,写了测试程序进行测试,存入300万条记录,占用flash大小为 86.1M,当把表中的记录全部删除后发后数据库文件大小依然是 86.1M: 原因是:sqlit ...

  8. Unity优化之贴图

    默认情况下当你把图片导入到unity中时,unity会自动把图片转换成最适合当前平台的压缩格式.如果你有一些特殊的需求,unity也提供了覆盖默认压缩格式的方法,如下图 在图片的Inspector窗口 ...

  9. 【C++11】unoedered_map和map（部分转载）

    1.结论 新版的hash_map都是unordered_map了,这里只说unordered_map和map. 运行效率:unordered_map最高,而map效率较低但提供了稳定效率和有序的序列. ...

  10. USB鼠标键盘数据格式以及按键键值

    鼠标发送给PC的数据每次4个字节 BYTE1 BYTE2 BYTE3 BYTE4 定义分别是: BYTE1 --        |--bit7:   1   表示   Y   坐标的变化量超出-256 ...