JS模拟实现Select效果代码


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS模拟实现Select效果代码。分享给大家供大家参考。具体如下:

这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了。

运行效果截图如下:

JS模拟实现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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟Select效果</title>
</head>
<body>
 <style>
 ul,li{list-style-type:none;padding:0;margin:0;}
 .select{width:200px;height:22px;line-height:22px;border:1px solid #dcdcdc;}
 #text_left{display:block;width:180px;float:left;padding:0 5px;}
 #arrow_right{
  display:block; 
 border-color:#FF6600 #FFFFFF #FFFFFF #FFFFFF;
 border-style: solid;
 border-width: 4px;
 display: block;
 font-size: 0;
 height: 0;
 line-height: 0;
 width: 0;
 float:left;margin-top:8px;
 cursor:pointer;
 }
 .list{width:200px;border:1px solid #dcdcdc;border-top:0;display:none;}
 .list li{line-height:24px;padding:0 5px;}
 .list li:hover{background:#F8F3F4;cursor:pointer;}
 </style>
 <div class="select">
 <span id="text_left">三水点靠木</span>
 <span id="arrow_right"></span> 
 </div>
 <ul class="list">
 <li>新浪新闻</li>
 <li>腾讯门户</li>
 <li>凤凰影视</li>
 <li>奇艺高清</li> 
 </ul>
 <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $('#arrow_right').click(function(e){
  $('.list').toggle();
  e.stopPropagation();
   $('body').click(function(){
   $('.list').hide();
   })
  })
  $('.list li').click(function(){
  $('#text_left').text(($(this).text())); 
  }) 
  })
 </script>
</body>
</html>

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

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
You might like
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php中namespace use用法实例分析
2016/01/22 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
js获取单选按钮的数据
2006/11/27 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python3.5绘制随机漫步图
2018/08/27 Python
python得到windows自启动列表的方法
2018/10/14 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
C语言如何决定使用那种整数类型
2016/11/26 面试题
介绍一下OSI七层模型
2012/07/03 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
教师自我鉴定范文
2013/11/10 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
2014年中秋寄语
2014/08/11 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
采购内勤岗位职责
2015/04/13 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书