css+jquery(js)写下拉菜单

来源：互联网发布：dvr监控软件编辑：程序博客网时间：2024/05/18 00:05

html中select是满足不了广大用户对下拉菜单的需求那么我们可以用css+jq来订制自己想要的下拉菜单；
代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="jquery-3.2.1.min.js"></script></head><body>    <div id="select">            <p>选择年份</p><span id="shu">|</span><span class="sjx"></span>            <div id="hide">                <p>2010</p>                <p>2011</p>                <p>2012</p>                <p>2013</p>                <p>2014</p>                <p>2015</p>                <p>2016</p>                <p>2017</p>            </div><style type="text/css">    *{margin:0;padding:0;}    #select{/*select样式*/    z-index:2;    float: left;    height: 25px;    text-align: center;    width: 100px;    border:1px #000 solid;    position: relative;    margin:100px;    }    #shu{/*竖线的样式*/        color: #999;        position: absolute;        left: 80%;        top: 0;    }    .sjx{/*用css写一个尖端朝下的三角形*/        top: 10px;        left: 87%;        position: absolute;        border-top:7px #666 solid;        border-left:5px #fff solid;        border-right:5px #fff solid;        width: 0;    }    .sjs{/*尖端朝上的三角形*/        top: 10px;        left:87%;        position: absolute;        border-left:5px #fff solid;        border-right:5px #fff solid;        border-bottom:7px #666 solid;        width: 0;    }    #hide{/*相当于html里select下option*/        display: none;/*在没有选择时候是隐藏的*/        text-align:center;        height:100px;        overflow:scroll;/*宽度是100px多余的部分隐藏*/        background: #fff;        font-size: 13px;        cursor:pointer;    }    #hide>p:hover{/*当鼠标移动到年份上时的样式*/        background: #1E90FF;        color: #fff;    }    </style><script type="text/javascript">    $(function(){            $("#select,#hide").mouseover(function(){//鼠标移动到select栏中的操作                 $("#hide").show();//使下拉的option选项show出来                 $(".sjx").addClass("sjs").removeClass("sjx");//给右侧箭头添加指向上的样式，删除指向下的样式            })            $("#select").mouseout(function(){//鼠标移开后select的行为                 $("#hide").hide();                 $(".sjs").addClass("sjx").removeClass("sjs")                      })            $("#hide").children("p").click(function(){/*点击年份让他出现在选择栏中*/                var year=$(this).html();                $("#select").children("p").html(year)            })    })</script></div></body></html>

其中需要主意几点：
1.
border做三角形；理解了border的原理其实很简单；
2.
.select中z-index:2;是为了避免其他网页元素遮挡住这个下拉菜单；
3.
关于jquery中.html();.val()；.text()三种不同使用方法；

    我会一一介绍的；谢谢您的支持！

阅读全文

1 0