效果图：

一.纯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. 二、初始化superset

    上一步成功安装了superset, 1.初始化数据 创建命令 #创建管理员账号fabmanager create-admin --app superset#cd到superset 根目录参考路径 C: ...

  2. 查询SQL Server执行过的SQL语句

    SELECT TOP 1000         ST.text AS '执行的SQL语句',        QS.execution_count AS '执行次数',        QS.total_ ...

  3. proxysql系列 ~ 运维相关

    一 常用命令   //实时加载   load mysql servers to runtime; mysql_server   load mysql users to runtime; mysql_u ...

  4. python多任务抓取图片

    import re import urllib.request import gevent def download(image_download, images_path,i): headers = ...

  5. Nginx下配置虚拟主机的三种方法

    Nginx下,一个server标签就是一个虚拟主机. 1.基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2.基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站,外部网站的 ...

  6. nginx conf_ctx ****

    http://blog.chinaunix.net/uid-27767798-id-3840094.html 断断续续看完了,还是没有全部清晰

  7. 3D 散点图的绘制

    一般情况下,我们用到最多的是axes3d() 中的axes3d.Axes3D()类,AxesD() 类下面存在散点图,线性图,柱状图,曲线图等各种制图方式. 采用matplotlib 生成散点图. 一 ...

  8. AWS S3服务使用

    AWS S3是亚马逊的一种文件存储服务使用方便. 一.配置服务 public static class AWS_S3ClientInfo { private static readonly strin ...

  9. EntityFramework+EntityFramework.SqlServerCompact部署网站

    1,最好通过Nuget添加引用EntityFramework.SqlServerCompact,省得去手动填写配置文件. 2,部署后遇到如下的问题: 原因是打包后的Bin下面缺少System.Data ...

  10. ansible中的map

    ansible中的filter:   map  ,其实是jinja2中的filter python中 map(func, iter) 返回func与每个元素计算后的迭代器,iter是个可迭代对象 an ...