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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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中变量及部分适用方法
2008/03/27 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
js四舍五入数学函数round使用实例
2014/05/09 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python处理大数字的方法
2015/05/27 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
历史系自荐信范文
2013/12/24 职场文书
创新比赛获奖感言
2014/02/13 职场文书
市场营销方案范文
2014/03/11 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
活动倡议书范文
2014/05/13 职场文书
公关活动策划方案
2014/05/25 职场文书
2014年度党员自我评议
2014/09/13 职场文书
报效祖国演讲稿
2014/09/15 职场文书
客户经理岗位职责
2015/01/31 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
党员带头倡议书
2015/04/29 职场文书