效果图：

一.纯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. raw_input与input

    raw_input 不管用户输入的是什么,最后打印的类型都会是str字符串类型 input 会根据用户的输入变换成相应的类型,但是需要注意的是我们用户在输入字符或者字符串的时候,需要给他们加上双引号, ...

  2. mac配置变量失败导致ls命令都失效

    1.在命令行中输入 export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 这样可以保证命令行命令暂时可以使用.命令执行完之后先不要关闭终端 ...

  3. 强行杀windows服务

    powershell命令:taskkill /f /fi "SERVICES eq 服务名称"

  4. 2019 icpc南昌全国邀请赛-网络选拔赛J题 树链剖分+离线询问

    链接:https://nanti.jisuanke.com/t/38229 题意: 给一棵树,多次查询,每次查询两点之间权值<=k的边个数 题解: 离线询问,树链剖分后bit维护有贡献的位置即可 ...

  5. Python爬虫基础之requests

    一.随时随地爬取一个网页下来 怎么爬取网页?对网站开发了解的都知道,浏览器访问Url向服务器发送请求,服务器响应浏览器请求并返回一堆HTML信息,其中包括html标签,css样式,js脚本等.我们之前 ...

  6. ActiveMQ与spring整合

    第一步:引用相关的jar包 <dependency> <groupId>org.springframework</groupId> <artifactId&g ...

  7. C# Emgu 类型转换

    Bitmap: Bitmap位图文件,是Windows标准格式,也是.Net主要的图像存储格式. Bitmap类以System.Drawing为命名空间,继承抽象类Image,同时里面封装了非常多对图 ...

  8. MySQL 的安装与使用（一）

    一.Windows 上安装 MySQL 1.Windows 上安装 MySQL 相对来说会较为简单,地那就链接 https://cdn.mysql.com//Downloads/MySQL-8.0/m ...

  9. jsp多模块相同数据提交到后台之数据处理

    最近在写一个java多模块表单提交,起初想的只是一个简单的form表单提交,写的时候发现不是真简单.多个相同类型数据提交到后台接收的问题很困难. 于是,和人进行深入的讨论,感觉j以json的格式提交时 ...

  10. Jace 上新建 Station 配置 笔记

    1.Station站点的结构图 2.niagara 结构框架图 Niagara 系统的架构是围绕着“以组件(Component)为导向的编程”为核心设计的.组件(Component)是使用Java 编 ...