这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本文主要与大家分享下 jquery ul 模拟列表菜单的具体实现步骤及代码, 有兴趣的朋友可以参考下哈,希望可以帮助到你
- <!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>
实现结果
打完收工!
来源: http://www.phperz.com/article/17/0420/280482.html