效果图：

一.纯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. 常用数据库：MongoDB

    下载地址:https://www.mongodb.com/download-center/community 安装及配置指南:https://docs.mongodb.com/manual/insta ...

  2. kali中的webshell工具--webacoo

    webacoo webshell其实就是放置在服务器上的一段代码 kali中生成webshell的工具 WeBaCoo(Web Backdoor Cookie) 特点及使用方法 类终端的shell 编 ...

  3. Mac os x下几款mysql客户端

    Mac os x几款mysql客户端 1,Navicat 这是一款可支持多种数据库的客户端,可支持mysql,sqlite,oracle,sql server等数据库.当然也可以选择只支持某种数据库的 ...

  4. CentOS配代理服务器

    背景: 某云上有台Windows主机,为了省钱(...),购买的1M带宽... 然后日常只有我用,特别卡,嫌弃得不行. 最近接触到代理,琢磨代理连接到局域网内带宽大的主机,是否上网速度会蹭蹭得涨?实践 ...

  5. 防盗链之URL参数签名

    一.概述 传统的 IP 禁用.referer 防盗链.User-Agent 防盗链.地区访问控制等防盗链措施已经无法完全满足用户要求,所以开发出URL参数签名方式来防盗链 二.实现 Token防盗链是 ...

  6. MariaDB存储过程笔记

    FECTH INTO 字段名不能与 CURSOR FOR 中select字段名一致,否则FETCH出的值均为空. DECLARE 字段名不能与 CURSOR FOR 中select语句内where条件 ...

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

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

  8. pytorch查看CUDA支持情况，只需要三行代码，另附Cuda runtime error (48) : no kernel image is available for execution处理办法

    import torch import torchvision print(torch.cuda.is_available()) 上面的命令只是检测CUDA是否安装正确并能被Pytorch检测到,并没 ...

  9. starting Tomcat v8.5 at localhost has encountered a problem

    好像有很多初学者会遇到这个问题 我也遇到这个问题了, 我的问题在于:

  10. 高可用Redis(十)：Redis原生命令搭建集群

    1.搭建Redis Cluster主要步骤 1.配置开启节点 2.meet 3.指派槽 4.主从关系分配 2.环境说明 两台虚拟机,IP地址分别为:192.168.81.100和192.168.81. ...