效果图：

一.纯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. 没有显示器如何SSH连接上树莓派

    1.在用读卡器烧录系统后先用Linux虚拟机连接上读卡器,修改 sudo gedit /etc/wpa_supplicant/wpa_supplicant.conf 加入 network={ ssid ...

  2. P5300 [GXOI/GZOI2019]与或和

    题目地址:P5300 [GXOI/GZOI2019]与或和 考虑按位计算贡献 对于 AND 运算,只有全 \(1\) 子矩阵才会有贡献 对于 OR 运算,所以非全 \(0\) 子矩阵均有贡献 如果求一 ...

  3. 使用freemarker生成word文档处理表格数据

    1.把需要从数据库取值的字段用${}括起来,如:${busDate};2.表格数据的循环需要加标签:<#list tbl3 as tbl3>......</#list>< ...

  4. 【easy】532. K-diff Pairs in an Array

    这道题给了我们一个含有重复数字的无序数组,还有一个整数k,让我们找出有多少对不重复的数对(i, j)使得i和j的差刚好为k.由于k有可能为0,而只有含有至少两个相同的数字才能形成数对,那么就是说我们需 ...

  5. go实现选择排序

    package main import "fmt" func SelectSort(data []int) { length := len(data) for i := 0; i ...

  6. lua post参数获取,参数截断

    post 请求头: a.application/x-www-form-urlencoded 普通表单提交 b.multipart/form-data 含有文件的表单,二进制上传 c.applicati ...

  7. 怎么编辑PDF文件内容，PDF文件编辑方法

    怎样编辑PDF文件内容?这是一个常常困扰我们的问题,工作当中我们经常会收到PDF格式的文件,但有时的文件内容不是我们想要的或者是觉得不合理的需要改掉.但是每次有这样的问题时都没有什么好的解决方法,每次 ...

  8. jq 操作表单中 checkbox 全选 单选

    知识点: Note: 1: .prop() 和 .attr() 方法的区别 .prop() 针对标签既有属性 .attr() 针对自定义属性 2: $('input:checked')即为选中元素. ...

  9. .Net 操作Excel表格

    一..从NuGet中,引用 Microsoft.Office.Interop.Excel类库. 方法一.先打开一个execl表然后进行保存 Application xApp = null; Workb ...

  10. Apt下载安装包时Hash校验和不符

    近期我的电脑在使用apt-get或aptitude下载Linux安装包时总是出现如下图所示的Hash校验和不符的问题.以至于下载过程被频繁中断,不得不反复运行apt-get或者在aptitude中按g ...