jQuery下拉框实现

最新推荐文章于 2024-08-09 07:07:14 发布

user_ccg

最新推荐文章于 2024-08-09 07:07:14 发布

阅读量2.3k

点赞数

分类专栏： jQuery特效文章标签： jquery select

本文链接：https://blog.csdn.net/user_ccg/article/details/77163977

版权

jQuery特效专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文介绍了如何在项目中用jQuery替代select标签创建自定义样式的下拉框。通过使用ul并调整CSS样式，实现了下拉框的美化。特别提到，为了保持下拉内容不影响表格宽度，需要对相关元素进行绝对定位并设置宽度。

摘要由CSDN通过智能技术生成

昨天做项目的时候发现用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中看效果哦！