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://1.huizit1.applinzi.com/CSS/DropDown/DropDown.html
时间： 2024-12-19 14:47:14