jQuery实现非常实用漂亮的select下拉菜单选择效果


Posted in Javascript onNovember 06, 2015

本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:

先来看如下运行效果截图:

jQuery实现非常实用漂亮的select下拉菜单选择效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>实用漂亮的select下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{font-size:12px;}
.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(images/selectbg.jpg) right 0px no-repeat;color:#fff;}
.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}
ul{list-style:none;margin:0;padding:0;}
ul li{height:24px;background:#666px;text-align:center;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var selects=$("#select");
  var options=$("#option");
  var state=true;
  selects.click(function(){
   if(state){
   if(!($(this).is(":animated"))){
    options.slideDown();
   }else{
    options.css("display","none");
  }  
   state=false;
   }else{
   if(!($(this).is(":animated"))){
   options.slideUp();
   }else{
    $(this).stop(true,true);
    options.css("display","");
   }
   state=true;
   }
  });
 selects.hover(function(){
 $(this).css("background","url(images/selectbg2.jpg) right 0px no-repeat");
 },
 function(){
 $(this).css("background","url(images/selectbg.jpg) right 0px no-repeat");
 });
  $("li").hover(function(){
   $(this).css("background","#990000").css("color","#ff9900");
  },
  function(){
   $(this).css("background","#820014").css("color","#fff");
  });
  $("li").click(function(){
   $(this).css("background","#c00").css("color","#ffffff");
   options.css("display","none");
   selects.children("span").text($(this).attr("tip"));
   $(".valt").val($(this).attr("tip"));
   state=false;
  });
  options.click(function(){
   selects.click(function(){return false;});
  });
 })
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
您的选择是:<input type="text" class="valt" value="">
<div class="select" id="select"><span>请选择分类</span>
 <div class="option" id="option">
  <ul>
   <li tip="推荐课程">推荐课程</li>
   <li tip="资讯中心">资讯中心</li>
   <li tip="辅导专区">辅导专区</li>
   <li tip="公职考试">公职考试</li>
   <li tip="司法考试">司法考试</li>
   <li tip="报关、报检员">报关、报检员</li>
   <li tip="高考辅导">高考辅导</li>
   <li tip="招生简章">招生简章</li>
   <li tip="招生信息">招生信息</li>
   <li tip="学员专区">学员专区</li>
   <li tip="公计培训">公计培训</li>
   <li tip="名师团队">名师团队</li>
   <li tip="辅导教材">辅导教材</li>
  </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的一个图片hover的插件
Apr 24 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
javascript如何实现暂停功能
Nov 06 #Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 #Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 #Javascript
JS实现的自定义网页拖动类
Nov 06 #Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
浅谈python中get pass用法
2019/03/19 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python保留小数位的三种实现方法
2020/01/07 Python
python代码中怎么换行
2020/06/17 Python
Python 日期与时间转换的方法
2020/08/01 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
教师专业自荐书范文
2014/02/10 职场文书
美术教师岗位职责
2014/03/18 职场文书
门前三包责任书
2014/04/15 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js