CSS3+JQuery实现带动画效果的下拉选择框。

元素结构为：

 1 <div class="box">

 2             <p>this is the first li</p>

 3             <div id="blank"></div>

 4             <ul>

 5                 <li  class="selected">this is the first li</li>

 6                 <li >Second li</li>

 7                 <li >Third li</li>

 8                 <li >Forth li</li>

 9                 <li >Fifth li</li>

10             </ul>

11  </div>

box是显示框，显示的内容是 P 标签。blank 是显示框右部的箭头，箭头效果是添加 border 属性实现的。

ul 是下拉框，初始状态下高度是0，当鼠标移动到 box 上面的时候，改变 ul 的高度。点击 li 标签之后设置 ul 的高度为0，并且设置 P 标签的内容。

当 li 标签里面的内容显示的时候，设置不同的背景颜色，所以要用 class 来区分被显示的是哪个。

给 ul 添加 transition 和 animation 属性来实现动画。

Jquery的siblings()方法能获得兄弟节点。

要注意的几点：

1: 在 li 标签添加点击事件的时候设置了 ul 的高度为0。如果只在CSS里面设置 ul 在不同状态下的不同高度而不在js里面设置高度的转换，那么在第一次点击 li 标签 ul 高度变为 0 之后， ul 的高度将会一直为 0 ，即使鼠标移动到显示框上面下拉框也不会再出现（尽管设置了 box：hover ul { height：200px }），这是因为js设置了元素的属性之后，这个样式将会嵌入到HTML代码，优先级比CSS高。所以需要在 js 中添加 box 的mouseover事件和mouseout事件，分别设置 ul 的高度为 200px 和 0 。

2:修改

.box:hover ul{
    transform-origin: 50% 0;
    animation: solid_down 0.5s ease-in;
    transition: height 0.2s;
}
里面的0.2s为其他的数值能够得到不同的效果。

HTML代码：

 1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <title></title>

 6     <link href="DropDown.css" rel="stylesheet" type="text/css">

 7     <script src="../../Jquery/jquery-2.2.1.min.js"></script>

 8     <script src="DropDown.js"></script>

 9 </head>

10 <body>

11     <div class="content">

12         <div class="box">

13             <p>this is the first li</p>

14             <div id="blank"></div>

15             <ul>

16                 <li  class="selected">this is the first li</li>

17                 <li >Second li</li>

18                 <li >Third li</li>

19                 <li >Forth li</li>

20                 <li >Fifth li</li>

21             </ul>

22         </div>

23         <div class="content"></div>

24     </div>

25 </body>

26 </html>

CSS代码：

 1 *{

 2     margin: 0px;

 3     padding: 0px;

 4 }

 5 body{

 6     background-color: #adecc0;

 7 }

 8 .content{

 9     margin: 200px auto;

10 }

11 .box{

12     margin: auto auto;

13     background-color: rgb(255, 255, 255);

14     width: 250px;

15     height: 40px;

16     position: relative;

17     cursor: pointer;

18 }

19 #blank{

20     width: 10px;

21     height: 10px;

22     border-right: 1px solid #c7c7c7;

23     border-bottom: 1px solid #c7c7c7;

24     position: absolute;

25     top: 11px;

26     right: 12px;

27     transform: rotate(45deg);

28     transition: transform 0.3s ease-out;

29 }

30 .box p{

31     line-height: 40px;

32     padding-left: 20px;

33 }

34 .box ul{

35     list-style: none;

36     background-color: #ffffff;

37     overflow: hidden;

38     height: 0px;

39     transition: height 0.5s;

40     width: 100%;

41 }

42 .box ul li{

43     line-height: 40px;

44     padding-left: 20px;

45 }

46 .box ul li:hover{

47     background-color: #a6e1ec;

48 }

49 .box:hover #blank{

50     transform: rotate(-135deg);

51 }

52 .box:hover ul{

53     transform-origin: 50% 0;

54     animation: solid_down 0.5s ease-in;

55     transition: height 0.2s;

56 }

57 @-moz-keyframes solid_down {

58      0%{transform: scale(1,0)}

59      25%{transform: scale(1,1.25)}

60      50%{transform: scale(1,0.85)}

61      75%{transform: scale(1,1.05)}

62      100%{transform: scale(1,1)}

63  }

64

65 @-webkit-keyframes solid_down {

66     0%{transform: scale(1,0)}

67     25%{transform: scale(1,1.25)}

68     50%{transform: scale(1,0.85)}

69     75%{transform: scale(1,1.05)}

70     100%{transform: scale(1,1)}

71 }

72 .content .box .selected{

73     background-color: #cbfac9;

74 }

JS代码：

 1 $(document).ready(function(){

 2     $("li").on("click",function(){

 3         var str1=this.innerHTML;

 4         $("p").html(str1);

 5         $("ul").css("height","0px");

 6         $(this).addClass("selected").siblings().removeClass("selected");

 7     });

 8     $(".box").on("mouseover",function(){

 9         $("ul").css("height","200px");

10     });

11     $(".box").on("mouseout",function(){

12         $("ul").css("height","0px");

13     });

14 });

效果：

http://39.105.101.122/myhtml/CSS/DropDown/DropDown.html

CSS3+Jquery实现带动画效果的下拉选择框的更多相关文章

  1. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  2. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  3. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  4. CSS3不一样的下拉选择框

    本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...

  5. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  7. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  8. java、easyui-combotree树形下拉选择框

    最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...

  9. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  10. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

随机推荐

  1. STM32F407 学习 （0） 各种外设功能 （中）

    十.高级定时器 1.重复计数器   如果我们设置重复计数器寄存器 RCR 的值为 N,那么更新事件将在定时器发生 N+1 次上溢或下溢时发生.重复计数器的特性,在控制生成 PWM 信号时很有用. 2. ...

  2. 容器云平台监控告警体系（三）—— 使用Prometheus Operator部署并管理Prometheus Server

    1.概述 Prometheus Operator是一种基于Kubernetes的应用程序,用于管理Prometheus实例和相关的监控组件.它是由CoreOS开发的开源工具,旨在简化Prometheu ...

  3. Onetable：统一的表格式元数据表示

    概括 Onehouse 客户现在可以将他们的 Hudi 表查询为 Apache Iceberg 和/或 Delta Lake 表,享受从云上查询引擎到顶级开源项目的原生性能优化. 在数据平台需求层次结 ...

  4. [Spring MVC]@RequestMapping 与 @RequestMapping+@RequestResponse的区别

    假定:返回格式均为JSON,JSON实体对象myJson的属性有:data.message.code.status. 二者的区别在于: @RequestMapping:会在最外层包裹 data属性,将 ...

  5. USART串口_第三课

    串口发送与接收 1.阻塞式发送 1.1.练习receive() 和Transmit() 测试1:测试接收发送函数 receive() 和 Transmit() 在main()中写入测试代码:将stm3 ...

  6. 如何通过Java应用程序在PPT中创建SmartArt图形

    SmartArt其实就是一个文字的可视化工具,用户可在PowerPoint,Word,Excel中使用该特性创建各种图形图表.SmartArt 图形是信息和观点的视觉表示形式.可以通过从多种不同布局中 ...

  7. Go语言:两种常见的并发模型

    Go语言:两种常见的并发模型 在并发编程中,须要精确地控制对共享资源的访问,Go语言将共享的值通过通道传递 并发版"Hello World" 使用goroutine来打印" ...

  8. Golang网络编程: DNS子域名爆破

    域名系统(Domain Name System,缩写:DNS)是互联网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.这就如同一个地址簿,根据域名来指向IP地 ...

  9. LeetCode 周赛 341 场，模拟 / 树上差分 / Tarjan 离线 LCA / DFS

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 上周末有单双周赛,双周赛我们讲过了,单周赛那天早上有事没参加,后面做了虚拟竞赛,然后整个 ...

  10. Node + Express 后台开发 —— 起步

    Node + Express 后台开发 -- 起步 前面陆续学习了一下 node.npm.模块,也稍尝试 Express,感觉得换一个思路加快进行. 比如笔者对前端的开发已较熟悉,如果领导给一个内部小 ...