<!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/xhtml" >
<head>
<title>CSS + jQuery 个性化的下拉框效果 by www.865171.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
</head>
<body>
<h1>CSS + jQuery 个性化的下拉框效果</h1>
<h3><a href="http://www.865171.cn/css-code/">更多CSS代码实例</a></h3>
<dl id="sample" class="dropdown">
<dt><a href="#"><span>Please select the country</span></a></dt>
<dd>
<ul>
<li><a href="#">Brazil<img class="flag" src="br.png" /><span class="value">BR</span></a></li>
<li><a href="#">France<img class="flag" src="fr.png" /><span class="value">FR</span></a></li>
<li><a href="#">Germany<img class="flag" src="de.png" /><span class="value">DE</span></a></li>
<li><a href="#">India<img class="flag" src="in.png" /><span class="value">IN</span></a></li>
<li><a href="#">Japan<img class="flag" src="jp.png" /><span class="value">JP</span></a></li>
<li><a href="#">Serbia<img class="flag" src="cs.png" /><span class="value">CS</span></a></li>
<li><a href="#">United Kingdom<img class="flag" src="gb.png" /><span class="value">UK</span></a></li>
<li><a href="#">United States<img class="flag" src="us.png" /><span class="value">US</span></a></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS + jQuery 个性化的下拉框效果 by www.865171.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
</head>
<body>
<h1>CSS + jQuery 个性化的下拉框效果</h1>
<h3><a href="http://www.865171.cn/css-code/">更多CSS代码实例</a></h3>
<dl id="sample" class="dropdown">
<dt><a href="#"><span>Please select the country</span></a></dt>
<dd>
<ul>
<li><a href="#">Brazil<img class="flag" src="br.png" /><span class="value">BR</span></a></li>
<li><a href="#">France<img class="flag" src="fr.png" /><span class="value">FR</span></a></li>
<li><a href="#">Germany<img class="flag" src="de.png" /><span class="value">DE</span></a></li>
<li><a href="#">India<img class="flag" src="in.png" /><span class="value">IN</span></a></li>
<li><a href="#">Japan<img class="flag" src="jp.png" /><span class="value">JP</span></a></li>
<li><a href="#">Serbia<img class="flag" src="cs.png" /><span class="value">CS</span></a></li>
<li><a href="#">United Kingdom<img class="flag" src="gb.png" /><span class="value">UK</span></a></li>
<li><a href="#">United States<img class="flag" src="us.png" /><span class="value">US</span></a></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/2538/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
[实践OK]软链接两个参数详细说明，linux下的ln -sf使用方法之
首先我们看一下php手册中关于删除cookie的说明评论列表
