jQuery实现自定义下拉列表

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现自定义下拉列表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1440字，纯文字阅读大概需要3分钟。

内容图文

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

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

以上就是本章的全部内容，更多相关教程请访问jQuery视频教程！

内容总结

以上是互联网集市为您收集整理的jQuery实现自定义下拉列表全部内容，希望文章能够帮你解决jQuery实现自定义下拉列表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端