jQuery 美化select下拉選單

admin發表於2019-01-19
jQuery

預設的select下拉選單基本可以用醜陋來形容，並且還不夠用CSS輕易的修改樣式，可以說美化空間很小，所以模擬實現select下拉選單是一個不錯的選擇，下面就分享一個程式碼例項，並詳細介紹一下它的實現過程。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0px;
  padding:0px;
}
ul li{
  list-style:none
}
#dropdown{
  width:186px; 
  margin:80px auto;
  position:relative
} 
#dropdown p{
  width:150px; 
  height:24px; 
  line-height:24px; 
  padding-left:4px; 
  padding-right:30px; 
  border:1px solid #a9c9e2; 
  background:#e8f5fe url(arrow.gif) no-repeat right 4px; 
  color:#807a62; 
  cursor:pointer
} 
#dropdown ul{
  width:184px; 
  background:#e8f5fe; 
  margin-top:-1px; 
  border:1px solid #a9c9e2; 
  position:absolute; 
  display:none
} 
#dropdown ul li{
  height:24px; 
  line-height:24px; 
  text-indent:10px
} 
#dropdown ul li a{
  display:block; 
  height:24px; 
  color:#807a62; 
  text-decoration:none
} 
#dropdown ul li a:hover{
  background:#c6dbfc; 
  color:#369
} 
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function(){
  $("#dropdown p").click(function(){ 
  var ul = $("#dropdown ul"); 
  if(ul.css("display")=="none"){ 
    ul.slideDown("fast"); 
  }else{ 
    ul.slideUp("fast"); 
  } 
}); 
 
$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  var value = $(this).attr("rel"); 
  $("#dropdown ul").hide(); 
  $("#result").html("您選擇了"+txt+"，值為："+value); 
}); 
});
</script> 
</head> 
<body>
<div id="dropdown">
  <p>--請選擇城市--</p>
  <ul> 
    <li><a href="#" rel="1">長沙</a></li> 
    <li><a href="#" rel="2">北京</a></li> 
    <li><a href="#" rel="3">南京</a></li> 
    <li><a href="#" rel="4">堪培拉</a></li> 
    <li><a href="#" rel="5">多倫多</a></li> 
  </ul> 
</div> 
<div id="result"></div> 
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$("#dropdown p").click(function(){ })，為p元素註冊click事件處理函式。

（3）.var ul = $("#dropdown ul"),獲取ul元素物件。

（4）.if(ul.css("display")=="none"){ 

  ul.slideDown("fast"); 

}else{ 

  ul.slideUp("fast"); 

}，判斷ul元素是否是隱藏的，如果隱藏，那麼就以動畫方式下拉，否則就收縮。

（5）.$("#dropdown ul li a").click(function(){ })，為連結註冊click事件處理函式。

（6）.var txt = $(this).text(),獲取連結中中的文字內容。

（7）.$("#dropdown p").html(txt),設定p元素的內容，也就點選下拉選單內容會將當前點選的條目中的內容寫入p。

（8）.var value = $(this).attr("rel"),獲取當前連結的rel屬性值。

（9）.$("#dropdown ul").hide(),隱藏ul元素。

（10）."#result").html("您選擇了"+txt+"，值為："+value),將相關值寫入指定元素。

二.相關閱讀:

（1）.click事件可以參閱jQuery click事件一章節。

（2）.css()方法可以參閱jQuery css()一章節。

（3）.slideDown()方法可以參閱jQuery slideDown()一章節。

（4）.slideUp()方法可以參閱jQuery slideUp()一章節。

相關文章