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实现输入提示(自动完成)的实例代码
Jun 14 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
js实现放大镜特效
May 18 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
JS array数组检测方式解析
May 19 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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
快速入门Vue
2016/12/19 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python学习笔记之多进程
2020/08/06 Python
"序列点" 是什么
2016/07/29 面试题
致跳高运动员加油稿
2014/02/12 职场文书
综合内勤岗位职责
2014/04/14 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
运动会标语
2014/06/21 职场文书
银行给客户的感谢信
2015/01/23 职场文书
门球健将观后感
2015/06/16 职场文书
教师节座谈会主持词
2015/07/03 职场文书