本文實(shí)例講述了jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果。分享給大家供大家參考，具體如下：
先來看如下運(yùn)行效果截圖：
在線演示地址如下：
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>實(shí)用漂亮的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>預(yù)覽效果時(shí)左下角會(huì)提示錯(cuò)誤，而且看不到效果，刷新一下就可以看到效果了；當(dāng)然，在實(shí)際使用中，不會(huì)出現(xiàn)這樣的問題。<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="輔導(dǎo)專區(qū)">輔導(dǎo)專區(qū)</li> <li tip="公職考試">公職考試</li> <li tip="司法考試">司法考試</li> <li tip="報(bào)關(guān)、報(bào)檢員">報(bào)關(guān)、報(bào)檢員</li> <li tip="高考輔導(dǎo)">高考輔導(dǎo)</li> <li tip="招生簡章">招生簡章</li> <li tip="招生信息">招生信息</li> <li tip="學(xué)員專區(qū)">學(xué)員專區(qū)</li> <li tip="公計(jì)培訓(xùn)">公計(jì)培訓(xùn)</li> <li tip="名師團(tuán)隊(duì)">名師團(tuán)隊(duì)</li> <li tip="輔導(dǎo)教材">輔導(dǎo)教材</li> </ul> </div></div></body></html>希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
