<div class="codetitle"> <span><a style="CURSOR: pointer" data="34673" class="copybut" id="copybut34673" onclick="doCopy('code34673')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code34673"> <br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>jquery用ul模拟表单select列表菜单效果</title> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <br><style type="text/css"> <BR><!-- <BR>body {padding:10px;} <BR>* {margin:0; padding:0; font-size:12px;} <BR>ul,li {list-style-type:none;} <BR>.select_box {width:150px; border:1px solid #ccc; padding-right:20px; padding-left:10px; background:url(107.gif) no-repeat 160px center; position:relative;} <BR>.select_box span {cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;} <BR>.select_box ul li {cursor:pointer;} <BR>.son_ul {width:179px; position:absolute; left:0; top:25px; border:1px dashed #ccc; background:#fff;} <BR>.son_ul li {display:block; line-height:25px; padding-left:10px; width:169px} <BR>.hover {background:#ccc;} <BR>--> <BR></style> <br><script type="text/javascript"> <BR>$(document).ready(function(){ <BR>$('.son_ul').hide(); //初始ul隐藏 <BR>$('.select_box span').hover(function(){ //鼠标移动函数 <BR>$(this).parent().find('ul.son_ul').slideDown(); //找到ul.son_ul显示 <BR>$(this).parent().find('li').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}); //li的hover效果 <BR>$(this).parent().hover(function(){}, <BR>function(){ <BR>$(this).parent().find("ul.son_ul").slideUp(); <BR>} <BR>); <BR>},function(){} <BR>); <BR>$('ul.son_ul li').click(function(){ <BR>$(this).parents('li').find('span').html($(this).html()); <BR>$(this).parents('li').find('ul').slideUp(); <BR>}); <BR>} <BR>); <BR></script> <br> <br> <br><ul id="main_box"> <br><li class="select_box"> <br><span>请选择...</span> <br><ul class="son_ul"> <br><li>选项一</li> <br><li>选项二</li> <br><li>选项三</li> <br><li>选项四</li> <br><li>选项五</li> <br> </ul> <br> </li> <br> </ul> <br> <br> <br> </div> <br>实现结果 <br><img src="http://files.jb51.net/file_images/article/201304/2013415110333556.png?20133151144" alt="jquery+css+ul模拟列表菜单具体实现思路_jquery" > <br>打完收工！
