<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <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; 패딩:0; 글꼴 크기:12px;} <BR>ul,li {목록 스타일 유형:없음;} <BR>.select_box {너비:150px; 테두리:1px 솔리드 #ccc; 오른쪽 패딩:20px; 왼쪽 패딩:10px; 배경:url(107.gif) 반복 없음 160px 중심; 위치:상대적;} <BR>.select_box 범위 {커서:포인터; 표시:블록; 줄 높이:25px; 너비:100%; 높이:25px; 오버플로:숨김;} <BR>.select_box ul li {cursor:pointer;} <BR>.son_ul {너비:179px; 위치:절대; 왼쪽:0; 상단:25px; 테두리:1px 점선 #ccc; 배경:#fff;} <BR>.son_ul li {display:block; 줄 높이:25px; 왼쪽 패딩:10px; 너비:169px} <BR>.hover {배경:#ccc;} <BR>--> <br></style> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br>$('.son_ul').hide(); //初始ul隐藏 <br>$('.select_boxspan').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')});效果 <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></head> <br><본문> <br><ul id="main_box"> <br><li class="select_box"> <br><span>请选择...</span> <br><ul class="son_ul"> <br><li>选项一</li> <br><li>选项two</li> <br><li>选项三</li> <br><li>选项4</li> <br><li>选项五</li> <br></ul> <br></li> <br></ul> <br></body> <br></html> <br> </div> <br>实现结果 <br><img src="http://files.jb51.net/file_images/article/201304/2013415110333556.png?20133151144" alt="jquery css ul 시뮬레이션 목록에 대한 구체적인 구현 아이디어 menu_jquery" > <br>打完收工!
