jQuery实现自定义下拉列表
2015-01-05 00:00
561 查看
html代码:
css代码:
js(jquery)代码:
虽然代码很简单,但是效果是不是非常酷呢
<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(); });
虽然代码很简单,但是效果是不是非常酷呢
相关文章推荐
- jquery自定义风格独特的下拉列表控件(可实现单选和多选)
- jQuery实现自定义下拉列表
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- jquery 操作单选框,复选框,下拉列表实现代码
- 仿百度搜索时的下拉列表(jQuery实现)
- Java实现的自定义可编辑表格控件(支持汇总、滚动、增行、删行、小数、日期、下拉列表、参照等)
- Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现)
- jquery 操作单选框,复选框,下拉列表实现代码
- jquery 实现左右下拉列表 选项 移动
- Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现) .
- jQuery实现GridView列表自定义显示列
- 基于MVC3方式实现下拉列表联动(JQuery)
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- 基于jquery的下拉列表实现
- jQuery实现下拉列表的实现[原]
- jquery 操作单选框,复选框,下拉列表实现代码
- Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现)
- Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现)
- Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现)