jQuery实现自定义下拉列表

前端技术 2023/09/09 JavaScript

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

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

本文地址：https://www.stayed.cn/item/25581

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案