jQuery实现自定义下拉列表
程序员文章站
2022-05-26 22:02:57
...
这篇文章主要介绍了使用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(); });
虽然代码很简单,但是效果是不是非常酷呢。
以上就是本章的全部内容,更多相关教程请访问jQuery视频教程!
上一篇: Web前端开发工具总结
下一篇: 在PHP中加密