jQuery实现自定义下拉列表


Posted in Javascript onJanuary 05, 2015

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

});

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

Javascript 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
使用javascript实现监控视频播放并打印日志
Jan 05 #Javascript
jQuery圆形统计图开发实例
Jan 04 #Javascript
jQuery中:selected选择器用法实例
Jan 04 #Javascript
jQuery中:checked选择器用法实例
Jan 04 #Javascript
jQuery中:disabled选择器用法实例
Jan 04 #Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 #Javascript
jQuery中:enabled选择器用法实例
Jan 04 #Javascript
You might like
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
办公室前台的岗位职责
2013/12/20 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
广告语设计及教案
2014/03/21 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis