jquery+css实现下拉列表

最新推荐文章于 2018-09-13 15:21:46 发布
最新推荐文章于 2018-09-13 15:21:46 发布
阅读量221 收藏
点赞数

<!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 class="selector-containter">
<div >
  <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 class="selector-t1 selector-containter">
<div >
  <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>

aa3214567
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Jquery、HTML、CSS、JS实现下拉菜单列表
weixin_56296642的博客
10-04 1021
使用Jquery、HTML、CSS、Javascript实现下拉菜单列表效果
CSS+jQuery 下拉菜单(仿select)
alex的博客
09-07 1016
html<div id="select_box"> <dl id="types"> <dt><span id="select_type">请选择</span></dt> <dd>百货</dd> <dd>生活用品</dd> <dd>电脑外设</dd> <dd>数码产品</dd> </dl> </div>cs
js css jquery 树形菜单 级联下拉框 自动弹出菜单 导航栏 跑马灯 js特效
09-18
js css jquery 树形菜单 级联下拉框 自动弹出菜单 导航栏 跑马灯 js特效 收集了大半年，个个好用
简单实用的下拉菜单（CSS+jquery）
weixin_30555125的博客
12-13 48
没什么可以说的，直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/...
【jQuery】用DIV层模拟下拉列表
iflash50的专栏
09-29 2182
jQuery模拟下拉列表，主要是使用了 $(e.target) 获取单击事件。
jquery+css实现下拉列表功能
01-19
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
JS+CSS实现下拉列表框美化效果（3款）
11-28
总的来说，JS+CSS实现下拉列表框美化效果是提高网页用户体验的重要手段，它需要开发者具备良好的前端技术基础，包括理解CSS布局原理和JavaScript编程技巧。通过灵活运用这些技术，可以创造出既实用又美观的网页元素...
html+jquery+CSS实现最简单的右侧导航栏效果
12-31
本教程将详细讲解如何使用HTML、CSS和jQuery来实现一个最简单的右侧导航栏效果。这个导航栏将具有响应式设计，能在不同设备上良好展示，并能通过点击事件动态显示和隐藏。 首先，我们从HTML结构开始。一个基础的...
jQuery+CSS3折叠卡片式下拉列表框实现效果
10-23
是一款使用jQuery和CSS3制作的效果非常炫酷的折叠卡片式下拉列表框特效，感兴趣的小伙伴们可以参考一下
纯CSS、原生JS、jQuery实现下拉菜单功能
wendZzoo的博客
09-13 3640
一、纯CSS实现 实现下拉菜单需要用display，即改变display的block或none值。 先构建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">...
Jquery 和JS获取下拉列表的值
热门推荐
喝勺子的汤@博客
10-22 1万+
一、Javascript获取下拉列表的选中的文本和值。select option 在前端是经常用到的表单元素，option里面的值一般是用来和后台交互的。那么如何来获取选中的文本和值呢？
前端简单入门第二十一讲 使用jQuery完成下拉列表左右选择
李阿昀的博客
07-06 3328
一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择使用jQuery完成下拉列表左右选择有这样一个需求，在(商品)分类的修改页面中，如下这样一个页面： 有某个分类下的所属的商品信息，我们应该可以对这些商品信息进行选择。即在修改分类的时候可以去添加商品，这时就需要用到下拉列表的左右选择了。 首先我们应该创建一个(商品)分类的修改页面，最后的运行效果正如上图。这里给出这样一个页面—
css+jquery(js)写下拉菜单
Jazh丶的博客
05-23 1761
html中select是满足不了广大用户对下拉菜单的需求那么我们可以用css+jq来订制自己想要的下拉菜单； 代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquer
jQuery的9种方式实现下拉列表
车联网开发的博客
08-18 8016
利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍，但是如果加上排列和组合不止这九种。（这么神奇，又在吹牛吧。）附代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
Scratch自制：《袁坤》1.0版本半成品公开展示、测试
最新发布
07-17
Scratch自制：袁坤1.0版本半成品公开展示、测试 由作者制作的另一款C++游戏：文字版《袁坤》改编的同名之作，内容丰富，将在C++版本的基础上进行做出些许改动，并不断创新，使游戏内容、剧情更加生动。 ——袁神派蒙“工作室” Ps：作者饼画的很大，后续将游戏完全制作完成可能还需要一段时间，Because作者是学生，前段时间刚分班考完，才腾出的时间进行创作，再次感谢粉丝们对袁神派蒙的支持！
出入库报表(实时库存)-Excel 模版
07-17
【作品名称】：出入库报表(实时库存)-Excel 模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
basemap-1.1.0-cp36-cp36m-win_amd64.whl
07-17
basemap-1.1.0-cp36-cp36m-win_amd64.whl
html下拉列表插件,js+CSS实现模拟华丽的select下拉菜单效果
05-11
这里给出一个简单的实现，使用了jQuery和CSS来模拟下拉菜单效果。 HTML代码： ``` 请选择 选项一 选项二 选项三 ``` CSS代码： ``` .custom-select { position: relative; display: inline-block; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值