jQuery实现自定义下拉列表

322 阅读 0 评论 213 点赞

我是靠谱客的博主留胡子鸵鸟，这篇文章主要介绍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();

});

虽然代码很简单，但是效果是不是非常酷呢