jQuery實現自定義下拉列表
更新時間:2015年01月05日 09:12:28 投稿:hebedich
這篇文章主要介紹了使用jQuery實現自定義下拉列表的方法及代碼分享,效果非常不錯,兼容性也很棒,這里推薦給小伙伴們。
html代碼:
復制代碼 代碼如下:
<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代碼:
復制代碼 代碼如下:
.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)代碼:
復制代碼 代碼如下:
$(".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實現多級聯(lián)動下拉列表查詢框
- jQuery實現輸入框下拉列表樹插件特效代碼分享
- jQuery三級下拉列表導航菜單代碼分享
- jquery用ajax方式從后臺獲取json數據后如何將內容填充到下拉列表
- jQuery插件datalist實現很好看的input下拉列表
- jQuery實現在下拉列表選擇時獲取json數據的方法
- JQuery 使用attr方法實現下拉列表選中
- jquery自定義下拉列表示例
- JQuery實現鼠標滑過顯示導航下拉列表
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- jQuery結合PHP+MySQL實現二級聯(lián)動下拉列表[實例]
- 利用jquery操作select下拉列表框的代碼
- jQuery實現可移動選項的左右下拉列表示例
相關文章
jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對它并不陌生吧,那么你們知道它們之間的區(qū)別嗎?在本文有個不錯的示例大家可以參考下2013-10-10jQuery實現響應鼠標背景變化的動態(tài)菜單效果代碼
這篇文章主要介紹了jQuery實現響應鼠標背景變化的動態(tài)菜單效果代碼,涉及jquery鼠標mouseover事件操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08