jquery+css+ul模拟列表菜单具体实现思路


Posted in Javascript onApril 15, 2013
<!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>jquery用ul模拟表单select列表菜单效果</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<style type="text/css"> 
<!-- 
body {padding:10px;} 
* {margin:0; padding:0; font-size:12px;} 
ul,li {list-style-type:none;} 
.select_box {width:150px; border:1px solid #ccc; padding-right:20px; padding-left:10px; background:url(107.gif) no-repeat 160px center; position:relative;} 
.select_box span {cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;} 
.select_box ul li {cursor:pointer;} 
.son_ul {width:179px; position:absolute; left:0; top:25px; border:1px dashed #ccc; background:#fff;} 
.son_ul li {display:block; line-height:25px; padding-left:10px; width:169px} 
.hover {background:#ccc;} 
--> 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.son_ul').hide(); //初始ul隐藏 
$('.select_box span').hover(function(){ //鼠标移动函数 
$(this).parent().find('ul.son_ul').slideDown(); //找到ul.son_ul显示 
$(this).parent().find('li').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}); //li的hover效果 
$(this).parent().hover(function(){}, 
function(){ 
$(this).parent().find("ul.son_ul").slideUp(); 
} 
); 
},function(){} 
); 
$('ul.son_ul li').click(function(){ 
$(this).parents('li').find('span').html($(this).html()); 
$(this).parents('li').find('ul').slideUp(); 
}); 
} 
); 
</script> 
</head> 
<body> 
<ul id="main_box"> 
<li class="select_box"> 
<span>请选择...</span> 
<ul class="son_ul"> 
<li>选项一</li> 
<li>选项二</li> 
<li>选项三</li> 
<li>选项四</li> 
<li>选项五</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

实现结果
jquery+css+ul模拟列表菜单具体实现思路 
打完收工!
Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
理解javascript闭包
Dec 15 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
js作用域及作用域链概念理解及使用
Apr 15 #Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 #Javascript
jquery分页插件AmSetPager(自写)
Apr 15 #Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 #Javascript
关于jQuery object and DOM element
Apr 15 #Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 #Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
Vue filter介绍及其使用详解
2017/10/21 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python单链表简单实现代码
2016/04/27 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
详解Python做一个名片管理系统
2019/03/14 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python中操作文件的模块的方法总结
2021/02/04 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
优秀干部获奖感言
2014/01/31 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
财务工作失职检讨书
2014/11/21 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL