欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现自定义下拉列表

程序员文章站 2023-10-28 15:35:52
jquery实现自定义下拉列表html代码: 代码如下:

jquery实现自定义下拉列表html代码:

代码如下:


<p class="dropdowncontainer">
    <p class="dropdowndefault">1</p>
    <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>
</p>

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