jQuery實(shí)現(xiàn)自定義下拉列表

更新時(shí)間：2015年01月05日 09:12:28 投稿：hebedich

這篇文章主要介紹了使用jQuery實(shí)現(xiàn)自定義下拉列表的方法及代碼分享，效果非常不錯(cuò)，兼容性也很棒，這里推薦給小伙伴們。

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代碼：

復(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();

});

雖然代碼很簡(jiǎn)單，但是效果是不是非常酷呢

您可能感興趣的文章:

相關(guān)文章

jQuery制作的別致導(dǎo)航有陰影背景高亮模式窗口
jQuery制作導(dǎo)航，在網(wǎng)上可以搜到很多方法，但比較別致一點(diǎn)的就不多了，本文這個(gè)別致是指有陰影背景高亮模式窗口
2014-04-04
快速學(xué)習(xí)jQuery插件 Cookie插件使用方法
快速學(xué)習(xí)jQuery插件中的Cookie插件使用方法，一個(gè)輕量級(jí)的cookie插件，可以讀取、寫入、刪除 cookie，感興趣的小伙伴們可以參考一下
2015-12-12
jquery+css實(shí)現(xiàn)簡(jiǎn)單的圖片輪播效果
這篇文章主要介紹了jquery+css實(shí)現(xiàn)簡(jiǎn)單的圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
看到其它網(wǎng)站A標(biāo)簽title效果，心里癢癢，就想也用到自己網(wǎng)站上。正好在學(xué)jquery 插件擴(kuò)展，就參照前輩代碼，自己動(dòng)手寫了一個(gè)
2010-11-11
jquery 文本上下無縫滾動(dòng),鼠標(biāo)放上去就停止小例子
jquery 文本上下無縫滾動(dòng),鼠標(biāo)放上去就停止小例子，需要的朋友可以參考一下
2013-06-06
推薦40個(gè)非常優(yōu)秀的jQuery插件和教程【系列三】
jQuery 在如今的 Web 開發(fā)項(xiàng)目中扮演著重要角色，jQuery 以其插件眾多、獨(dú)特、輕量以及支持大規(guī)模的網(wǎng)站開發(fā)聞名。本文大家分享40個(gè)實(shí)用的 jQuery 插件，可以根據(jù)您的項(xiàng)目需要來選擇使用
2011-11-11
jquery動(dòng)態(tài)改變form屬性提交表單
在js中動(dòng)態(tài)改變form的屬性，滿足不同條件的form提交需求，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-06-06
jQuery實(shí)現(xiàn)的簡(jiǎn)單在線計(jì)算器功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單在線計(jì)算器功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)簡(jiǎn)單四則運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下
2017-05-05
jQuery.uploadify文件上傳組件實(shí)例講解
這篇文章主要介紹了jQuery.uploadify文件上傳組件實(shí)例講解的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03