<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 Transitional//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; font-size:12px;} <BR>ul,li {list-style-type:none;} <BR>.select_box {width:150px;ボーダー:1px ソリッド #ccc;パディング右:20px;パディング左:10px;背景:url(107.gif) リピートなし 160px 中央;位置:相対;} <BR>.select_box スパン {カーソル:ポインタ;表示:ブロック;行の高さ:25px;幅:100%;高さ:25ピクセル; overflow:hidden;} <BR>.select_box ul li {cursor:pointer;} <BR>.son_ul {width:179px;位置:絶対;左:0;上:25ピクセル;境界線:1 ピクセルの破線 #ccc;背景:#fff;} <BR>.son_ul li {表示:ブロック;行の高さ:25px;パディング左: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')}); //リのホバー結果 <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></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>选项二</li> <br><li>选项三</li> <br><li>选项四</li> <br><li>选项五</li> <br> <br></li> <br> <br></body> <br></html> <br><br> <br>实现结果 </div> <br> <br>打完收工！
