jquery css ul模擬清單選單具體實現想法_jquery

複製代碼如下代碼：

渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>
;





$(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();
});
腳本>
頭>

• 
  請選擇...
  
  
  
  • 選項一
  
  
  • 選項二
  
  
  • 選項三
  
  
  • 選項四
  
  
  • 選項五
  
  
  
  

身體>



達成結果

 
打完收工！