jQuery實現(xiàn)自定義下拉列表
更新時間:2015年01月05日 09:12:28 投稿:hebedich
這篇文章主要介紹了使用jQuery實現(xiàn)自定義下拉列表的方法及代碼分享,效果非常不錯,兼容性也很棒,這里推薦給小伙伴們。
html代碼:
復(fù)制代碼 代碼如下:
<div class="dropdownContainer">
<div class="dropdownDefault">1</div>
<span class="downArrow arrow"></span>
<ul class="dropdrown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">6</a></li>
<li><a href="#">8</a></li>
</ul>
</div>
css代碼:
復(fù)制代碼 代碼如下:
.dropdownContainer{position: relative;height: 30px;width: 100%;background: #555;}
.dropdownDefault{border:1px solid #ddd;line-height: 28px;text-indent: 0.5em;}
.dropdownContainer .downArrow{position: absolute;right: 5px;top: 9px}
.dropdrown-menu{position: absolute;top:100%;width: 100%;left: 0;background: #555;display: none;}
.dropdrown-menu li{line-height: 24px;}
.dropdrown-menu li a{display: inline-block;width: 100%;text-indent: 0.5em}
.dropdrown-menu li a:hover{background: #0078b6;font-size: 1.1em;}
.arrow{width: 0;height: 0;display: inline-block;cursor: pointer;}
.downArrow{border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #fff;}
js(jquery)代碼:
復(fù)制代碼 代碼如下:
$(".dropdownDefault,.dropdownContainer .downArrow").click(function(){
$(this).siblings(".dropdrown-menu").show();
});
$(".dropdrown-menu li a").click(function(){
$(this).parent().parent().siblings(".dropdownDefault").html($(this).html());
$(this).parent().parent().hide();
});
雖然代碼很簡單,但是效果是不是非常酷呢
您可能感興趣的文章:
- jQuery實現(xiàn)多級聯(lián)動下拉列表查詢框
- jQuery實現(xiàn)輸入框下拉列表樹插件特效代碼分享
- jQuery三級下拉列表導(dǎo)航菜單代碼分享
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- jQuery插件datalist實現(xiàn)很好看的input下拉列表
- jQuery實現(xiàn)在下拉列表選擇時獲取json數(shù)據(jù)的方法
- JQuery 使用attr方法實現(xiàn)下拉列表選中
- jquery自定義下拉列表示例
- JQuery實現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- jQuery結(jié)合PHP+MySQL實現(xiàn)二級聯(lián)動下拉列表[實例]
- 利用jquery操作select下拉列表框的代碼
- jQuery實現(xiàn)可移動選項的左右下拉列表示例
相關(guān)文章
jQuery綁定事件-多種實現(xiàn)方式總結(jié)
下面小編就為大家?guī)硪黄猨Query綁定事件-多種實現(xiàn)方式總結(jié)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對它并不陌生吧,那么你們知道它們之間的區(qū)別嗎?在本文有個不錯的示例大家可以參考下2013-10-10jquery自定義插件開發(fā)之window的實現(xiàn)過程
這篇文章主要介紹了jquery自定義插件開發(fā)之window的實現(xiàn)過程的相關(guān)資料,需要的朋友可以參考下2016-05-05jQuery實現(xiàn)響應(yīng)鼠標(biāo)背景變化的動態(tài)菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)響應(yīng)鼠標(biāo)背景變化的動態(tài)菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08為什么要在引入的css或者js文件后面加參數(shù)的詳細(xì)講解
為什么要在引入的css或者js文件后面加參數(shù)的詳細(xì)講解,需要的朋友可以參考一下2013-05-05