求教：如何在一个drop down list 内部再嵌套另一个drop down list 并取值_html/css

首页

web前端

html教程

求教：如何在一个drop down list 内部再嵌套另一个drop down list 并取值_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:19 PM

最近在web 前台（front-end）开发时遇到一个技术问题，但没查到解决方法，想请教一下：在web 客户端（client side）如何实现在一个“父 (parent)" drop down list内部再嵌套另一个”子（child）“drop down list 并将子下拉菜单取值后的内容传给上一级下拉菜单后输出

回复讨论(解决方案)

1.外层的drop down list 通过其他元素如div去模拟
2.重新设计使之更合理这种情况可以像常见的选择了省份在选择市之类的关联选择那样选择

多谢楼上的朋友。由于我经验很有限，不知能否提供一些实例，或给个链接参考一下。

谢先！

现在遇到的情况是这样的：
（1）在firefox上运行异常；
（2）子（child)dropdownlist中取的值，不知如何赋给上一dropdownlist（即由css，div模拟的那个parent dropdownlist）

练习源代码如下：

demo.html

<!DOCTYPE html><html lang="en">    <head>		<meta charset="UTF-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 		<meta name="viewport" content="width=device-width, initial-scale=1.0">         <title>Custom Drop-Down List Styling</title>        <link rel="stylesheet" type="text/css" href="style.css" />        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />		<script type="text/javascript" src="modernizr.custom.79639.js"></script> 		<noscript><link rel="stylesheet" type="text/css" href="noJS.css" /></noscript>        </head>    <body>        <div class="container">					<!-- Codrops top bar -->            <div class="codrops-top"></div><!--/ Codrops top bar -->						<header>							<h1 id="nbsp"> </h1>				<h2 id="nbsp"> </h2>								<nav class="codrops-demos"></nav>							</header>						<section class="main">				<div class="wrapper-demo">					<div id="dd" class="wrapper-dropdown-1" tabindex="1">						<span>Select Contact</span>					    <ul class="dropdown" tabindex="1">					        <li><a href="#">				        	<form>									<select id="myselect">										<option value="1">Ed Bradley</option>										<option value="2">Contact2</option>										<option value="3">Contact3</option>									</select>								</form>                            	</a>                            </li>					        <li><a href="#">				        	<form>									<select id="myselect">        								<option value="0">Select a Saved List</option>										<option value="1">List1</option>										<option value="2">List2</option>										<option value="3">List3</option>									</select>								</form>                            	</a>                            </li>                            <li><a href="#">Active Search - 200 Contacts</a></li>					        <li><a href="#">All Contacts - 70000 Contacts</a></li>					    </ul>					</div>				?</div>			</section>			        </div>		<!-- jQuery if needed -->       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>		<script type="text/javascript">						function DropDown(el) {				this.dd = el;				this.placeholder = this.dd.children('span');				this.opts = this.dd.find('ul.dropdown > li');				this.val = '';				this.index = -1;				this.initEvents();			}			DropDown.prototype = {				initEvents : function() {					var obj = this;					obj.dd.on('click', function(event){						$(this).toggleClass('active');						return false;					});					obj.opts.on('click',function(){						var opt = $(this);						obj.val = opt.text();						obj.index = opt.index();						obj.placeholder.text('Select Contact: ' + obj.val);					});				},				getValue : function() {					return this.val;				},				getIndex : function() {					return this.index;				}			}			$(function() {				var dd = new DropDown( $('#dd') );				$(document).click(function() {					// all dropdowns					$('.wrapper-dropdown-1').removeClass('active');				});			});					</script>	</body></html>

style.css

@import url('demo.css');@import url('font-awesome.css');/* GLOBALS */*,*:after,*:before {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    padding: 0;    margin: 0;}::selection {    background: transparent; }::-moz-selection {    background: transparent; }.wrapper-demo {    margin: 60px 0 0 0;    *zoom: 1;    font-weight: 400;}.wrapper-demo:after {    clear: both;    content: "";    display: table;}/* DEMO 1 */.wrapper-dropdown-1 {    /* Size and position */    position: relative; /* Enable absolute positionning for children and pseudo elements */    width: 400px;    padding: 10px;    margin: 0 auto;    /* Styles */    background: #9bc7de;    color: #fff;    outline: none;    cursor: pointer;    /* Font settings */    font-weight: bold;}.wrapper-dropdown-1:after {    content: "";    width: 0;    height: 0;    position: absolute;    right: 16px;    top: 50%;    margin-top: -6px;    border-width: 6px 0 6px 6px;    border-style: solid;    border-color: transparent #fff;    }.wrapper-dropdown-1 .dropdown {    /* Size & position */    position: absolute;    top: 100%;    left: 0;    right: 0;    /* Styles */    background: #fff;    list-style: none;    font-weight: normal; /* Cancels previous font-weight: bold; */    /* Hiding */    opacity: 0;    pointer-events: none;}.wrapper-dropdown-1 .dropdown li a {    display: block;    text-decoration: none;    color: #9e9e9e;    padding: 10px 20px;}/* Hover state */.wrapper-dropdown-1 .dropdown li:hover a {    background: #f3f8f8;}/* Active state */.wrapper-dropdown-1.active .dropdown {    opacity: 1;    pointer-events: auto;}.wrapper-dropdown-1.active:after {    border-color: #9bc7de transparent;    border-width: 6px 6px 0 6px ;    margin-top: -3px;}.wrapper-dropdown-1.active {  background: #9bc7de;  background: -moz-linear-gradient(left,  #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff));  background: -webkit-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  background: -o-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  background: -ms-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  background: linear-gradient(to right,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );}/* No CSS3 support */.no-opacity       .wrapper-dropdown-1 .dropdown,.no-pointerevents .wrapper-dropdown-1 .dropdown {    display: none;    opacity: 1; /* If opacity support but no pointer-events support */    pointer-events: auto; /* If pointer-events support but no pointer-events support */}.no-opacity       .wrapper-dropdown-1.active .dropdown,.no-pointerevents .wrapper-dropdown-1.active .dropdown {    display: block;}

demo.css

/* General Demo Style */body {	font-family: 'Lato', 'Arial', sans-serif;	background: #ddd url(../images/bg.jpg);	font-weight: 300;	font-size: 15px;	color: #333;	-webkit-font-smoothing: antialiased;	overflow-y: scroll;	overflow-x: hidden;}a {	color: #555;	text-decoration: none;}.container {	width: 100%;	position: relative;}.clr {	clear: both;	padding: 0;	height: 0;	margin: 0;}.main {	width: 90%;	margin: 0 auto;	position: relative;}.container > header {	margin: 10px;	padding: 20px 10px 10px 10px;	position: relative;	display: block;	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);    text-align: center;}.container > header h1 {	font-size: 30px;	line-height: 38px;	margin: 0;	position: relative;	font-weight: 300;	color: #666;	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}.container > header h2 {	font-size: 14px;	font-weight: 300;	margin: 0;	padding: 15px 0 5px 0;	color: #888;	font-family: Cambria, Georgia, serif;	font-style: italic;	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);}/* Header Style */.codrops-top {	line-height: 24px;	font-size: 11px;	background: #fff;	background: rgba(255, 255, 255, 0.5);	text-transform: uppercase;	z-index: 9999;	position: relative;	font-family: Cambria, Georgia, serif;	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */.codrops-top:before,.codrops-top:after {    content: " "; /* 1 */    display: table; /* 2 */}.codrops-top:after {    clear: both}.codrops-top a {	padding: 0px 10px;	letter-spacing: 1px;	color: #333;	display: inline-block;}.codrops-top a:hover {	background: rgba(255,255,255,0.6);}.codrops-top span.right {	float: right;}.codrops-top span.right a {	float: left;	display: block;}/* Demo Buttons Style */.codrops-demos {    text-align:center;	display: block;	line-height: 30px;	padding: 5px 0px;}.codrops-demos a {    display: inline-block;	margin: 0px 4px;	padding: 0px 6px;	color: #aaa;	line-height: 20px;		font-size: 12px;	font-weight: 700;	text-shadow: 1px 1px 1px #fff;	border: 1px solid #fff;	background: #ffffff; /* Old browsers */	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}.codrops-demos a:hover {	color: #333;	background: #fff;}.codrops-demos a:active {	background: #fff;}.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover {	background: #f0f0f0;	border-color: #d9d9d9;	color: #aaa;	box-shadow: 0 1px 0 rgba(255,255,255,0.3);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}.support-note span {	color: #ac375d;	font-size: 16px;	display: none;	font-weight: bold;	text-align: center;	padding: 5px 0;}.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions {	display: block;}

noJS.css

/* DEMO 1 */.wrapper-dropdown-1:focus .dropdown {    opacity: 1;    pointer-events: auto;}.wrapper-dropdown-1:focus:after {    border-color: #9bc7de transparent;    border-width: 6px 6px 0 6px ;    margin-top: -3px;}

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，