jQuery下拉框实现

来源：互联网发布：linux禅道服务启动编辑：程序博客网时间：2024/05/22 06:23

昨天做项目的时候发现用select标签写下拉框样式比较丑，和设计师设计的有很大出入，所以就用jQuery实现了一个下拉框，可以修改其样式。

<!--这是HTML代码--><!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-3.1.0.js"></script><!--引入jQuery-->  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>  <div>    <div id="main">      <div id="content">内容一</div>      <div id="tan">▶</div>    </div>    <div id="div">      <ul id="ul">        <li onclick="change(this)">内容一</li>        <li onclick="change(this)">内容二</li>        <li onclick="change(this)">内容三</li>      </ul>    </div></div></body></html>

在HTML中关键的就是用ul代替select，然后通过修改ul样式来修改下拉样式。

//这是css代码#main,#ul{  padding:0px;  width:100px;  list-style-type:none;    margin:0px;  border:1px solid #ccc;  box-shadow:0 0 3px #aaa;}#div{  display:none;}#ul li:hover{  background-color:#aaa;}#content,#tan{  display:inline-block;}#tan{  float:right;}

css代码需要注意的就是倒三角的浮动，虽然在我写的例子中没有太大影响，但是如果你要居中并对齐下面内容，设置浮动是个很好的选择。

//这是js代码$("#main").click(function(){  if($("#div").css("display")=="none"){//判断下拉还是上拉    $("#tan").text("▼");    $("#div").slideDown();//设置下拉动画  }else{    $("#tan").text("▶");    $("#div").slideUp();//设置上拉动画  }})function change(e){//把内容写入输入的div中  var a=$(e).text();  $("#content").text(a);  if($("#div").css("display")!=="none"){   $("#div").slideUp();  }}//可以在https://jsbin.com/wirapejiwa/edit?html,css,js,console,output中看效果哦！

最后应用时发现，如果需要下拉时。下拉框内容不影响表格宽度的话，就需要设定#div定位为绝对定位，再把.select > div的宽度设置下哦！

阅读全文

0 0