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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
AngularJS表单验证功能
Oct 19 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
js实现九宫格布局效果
May 28 Javascript
Element Notification通知的实现示例
Jul 27 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简单读取PDF页数的实现方法
2016/07/21 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python如何对XML 解析
2020/06/28 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
总经理工作职责范文
2014/03/14 职场文书
计划生育宣传标语
2014/06/21 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
商业计划书格式、范文
2019/03/21 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL