jQuery下拉框实现

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




<html>
<head>

<script src="https://code.jquery.com/jquery-3.1.0.js">script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">


  <title>JS Bintitle>
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的宽度设置下哦!

你可能感兴趣的:(jQuery特效)