本文實例講述了jQuery實現非常實用漂亮的select下拉菜單選擇效果。分享給大家供大家參考，具體如下：
先來看如下運行效果截圖：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-select-chose-style-menu-codes/
具體代碼如下：
<!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><title>實用漂亮的select下拉菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{font-size:12px;}.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(images/selectbg.jpg) right 0px no-repeat;color:#fff;}.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}ul{list-style:none;margin:0;padding:0;}ul li{height:24px;background:#666px;text-align:center;}</style><script type="text/javascript" src="jquery1.3.2.js"></script><script type="text/javascript"> $(document).ready(function(){ var selects=$("#select"); var options=$("#option"); var state=true; selects.click(function(){ if(state){ if(!($(this).is(":animated"))){ options.slideDown(); }else{ options.css("display","none"); } state=false; }else{ if(!($(this).is(":animated"))){ options.slideUp(); }else{ $(this).stop(true,true); options.css("display",""); } state=true; } }); selects.hover(function(){ $(this).css("background","url(images/selectbg2.jpg) right 0px no-repeat"); }, function(){ $(this).css("background","url(images/selectbg.jpg) right 0px no-repeat"); }); $("li").hover(function(){ $(this).css("background","#990000").css("color","#ff9900"); }, function(){ $(this).css("background","#820014").css("color","#fff"); }); $("li").click(function(){ $(this).css("background","#c00").css("color","#ffffff"); options.css("display","none"); selects.children("span").text($(this).attr("tip")); $(".valt").val($(this).attr("tip")); state=false; }); options.click(function(){ selects.click(function(){return false;}); }); })</script></head><body>預覽效果時左下角會提示錯誤，而且看不到效果，刷新一下就可以看到效果了；當然，在實際使用中，不會出現這樣的問題。<br>您的選擇是：<input type="text" class="valt" value=""><div class="select" id="select"><span>請選擇分類</span> <div class="option" id="option"> <ul> <li tip="推薦課程">推薦課程</li> <li tip="資訊中心">資訊中心</li> <li tip="輔導專區">輔導專區</li> <li tip="公職考試">公職考試</li> <li tip="司法考試">司法考試</li> <li tip="報關、報檢員">報關、報檢員</li> <li tip="高考輔導">高考輔導</li> <li tip="招生簡章">招生簡章</li> <li tip="招生信息">招生信息</li> <li tip="學員專區">學員專區</li> <li tip="公計培訓">公計培訓</li> <li tip="名師團隊">名師團隊</li> <li tip="輔導教材">輔導教材</li> </ul> </div></div></body></html>希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
