jquery+css实现下拉列表功能


Posted in jQuery onSeptember 03, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所述:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fruit</title>
<style type="text/css">
.hide {
 display: none;
}
div {
 float: left;
 width: 100%;
}
.selector-containter {
 margin-bottom: 10px;
}
.selector {
 width: 200px;
 background: #FFF;
 border: 1px solid #DDD;
}
.selector-hint {
 width: 178px;
 border: 1px solid #DDD;
}
.selector-expand {
 width: 8px;
 border: 1px solid #DDD;
}
.selector-collapse {
 width: 8px;
 border: 1px solid #DDD;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
  //使用on方法,采用事件委派机制,selector-option-container中的内容为后续动态追加
  $('.selector').on('click', '.selector-expand', function() {
    $(this).parent().children('.selector-option-container').children().remove();
    $(this).parent().children('.selector-option-container').append('<div><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></div><div class="selector-option">apricot</div>');
    $(this).parent().children('.selector-option-container').append('<div><input type="checkbox" name="fruitGroup" class="selector-checkbox"/></div><div class="selector-option">banana</div>');
    $(this).nextAll('.selector-option-container').removeClass('hide');
  });
  $('.selector').on('click', '.selector-collapse', function() {
    $(this).nextAll('.selector-option-container').addClass('hide');
  });
  $('.selector-t1').on('click', '.selector-option', function() {
    $(this).parent().parent().children('.selector-hint').text($(this).text());
    $(this).parent().addClass('hide');
  });
  $('.selector-t1').on('click', '.selector-checkbox', function() {
    $(this).parent().parent().parent().children('.selector-hint').text($(this).parent().next().text());
    //采用prop方法,对于值为布尔型的属性赋值
    $(this).prop('checked', false);
    $(this).parent().parent().addClass('hide');
  });
});
</script>
</head>
<body>
<div id="titan" class="selector-containter">
<div id="fruit">
 <div class="selector">
  <div class="selector-hint">select fruit</div>
  <div class="selector-expand">+</div>
  <div class="selector-collapse">-</div>
  <div class="selector-option-container">
  </div>
 </div>
</div>
</div>
<div id="athena" class="selector-t1 selector-containter">
<div id="fruit">
 <div class="selector">
  <div class="selector-hint">select fruit</div>
  <div class="selector-expand">+</div>
  <div class="selector-collapse">-</div>
  <div class="selector-option-container">
  </div>
 </div>
</div>
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的jquery+css实现下拉列表功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
You might like
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
关键字final的用法
2013/10/02 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
文明教师事迹材料
2014/01/16 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Python中文纠错的简单实现
2021/07/07 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
人民币符号
2022/02/17 杂记