jQuery：animate，制做平滑的下拉菜单

CSS：

.div,ul,p{
    cursor: pointer;  //小手样式
}
div,ul{
    width: 150px;margin: auto;
    text-align: center;
}
div{
    margin-top: 50px;
    border: 1px solid #9599A2;
    padding: 5px 0;
    border-radius: 3px;
}
ul{
    border-bottom: 1px solid aqua; //设置下拉框的底边框颜色
    border-right: 1px solid aqua;    //设置下拉框的右边框颜色
    border-left: 1px solid aqua;    //设置下拉框的左边框颜色
    height: 0;    //设置高度下拉框的高度为0，就可用anmate让下拉狂达到平滑下拉
    display: none;
    border-radius: 0 0 3px 3px;
    padding: 0 1px;
    opacity: 0;    //设置透明度，让透明度从0开始渐变为1
    background-color: aliceblue;
}
p{
    padding: 5px 0;
    margin: 0;
}
p:hover{
    background-color: aqua;
    border-radius: 0 0 3px 3px;
}

 

HTML:

<div>请选择客车</div>
<ul>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
   <p>5</p>
</ul>

 

JS/jQuery:

$("div").click(function(){
    //一开始下拉框是隐藏的，显得将它“显示”出来，当前仍是透明的
    $("ul").css("display","block");
    //获取下拉的项目栏的个数，用来计算下拉框要渐变到多长
    window.height =$(".modal-ctt p").length;
    $("ul").animate({
        height: height *25 +'px',
        opacity: 1
    },height *60); //这里是根据下拉菜单的项目栏个数，改变渐变时间
});

$("p").click(function(){
    //获取被点击的项目栏的值，并放到显示栏（DIV）中
    var value =$(this).val();
    $("div").text(value);
    //点击完项目栏，侧让下拉框收回去，用animate让height和opacity渐变为0；
    $("ul").animate({
        height: 0,
        opacity: 0
    },height *60);
    //收回去后，下拉框只是变透明的，下拉框的内容仍是在的，
    //因此咱们要在下拉框收完后，将下拉框隐藏，能够用setTimeout在渐变完成后将下拉框隐藏
    setTimeout(function(){
        $("ul").css("display","none");
    },height *60);
});