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 相关文章推荐
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
使用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
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
实例讲解React 组件
2020/07/07 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
速记Python布尔值
2017/11/09 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Django如何使用redis作为缓存
2020/05/21 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
军训 自我鉴定
2014/02/03 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
住宅质量保证书
2014/04/29 职场文书
教师节寄语2015
2015/03/23 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
离婚被告代理词
2015/05/23 职场文书
立春观后感
2015/06/18 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS