<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery淘宝商品列表多条件查询</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "РВЛОМе";
}
/* select */
.select {
padding: 5px 10px;
border: #ddd 1px solid;
border-radius: 4px;
60%;
margin: 5% auto;
font-size: 12px
}
.select li {
list-style: none;
padding: 10px 0 5px 100px
}
.select .select-list {
border-bottom: #eee 1px dashed
}
.select dl {
zoom: 1;
position: relative;
line-height: 24px;
}
.select dl:after {
content: " ";
display: block;
clear: both;
height: 0;
overflow: hidden
}
.select dt {
100px;
margin-bottom: 5px;
position: absolute;
top: 0;
left: -100px;
text-align: right;
color: #666;
height: 24px;
line-height: 24px
}
.select dd {
float: left;
display: inline;
margin: 0 0 5px 5px;
}
.select a {
display: inline-block;
white-space: nowrap;
height: 24px;
padding: 0 10px;
text-decoration: none;
color: #039;
border-radius: 2px;
}
.select a:hover {
color: #f60;
background-color: #f3edc2
}
.select .selected a {
color: #fff;
background-color: #f60
}
.select-result dt {
font-weight: bold
}
.select-no {
color: #999
}
.select .select-result a {
padding-right: 20px;
background: #f60 url("close.gif") right 9px no-repeat
}
.select .select-result a:hover {
background-position: right -15px
}
/*www.jq22.com*/
</style>
<script src="jquery.js"></script>
</head>
<body>
<ul class="select">
<li class="select-list">
<dl id="select1">
<dt>上装：</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">针织衫</a></dd>
<dd><a href="#">毛呢外套</a></dd>
<dd><a href="#">T恤</a></dd>
<dd><a href="#">羽绒服</a></dd>
<dd><a href="#">棉衣</a></dd>
<dd><a href="#">卫衣</a></dd>
<dd><a href="#">风衣</a></dd>
</dl>
</li>
<li class="select-list">
<dl id="select2">
<dt>裤装：</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">牛仔裤</a></dd>
<dd><a href="#">小脚/铅笔裤</a></dd>
<dd><a href="#">休闲裤</a></dd>
<dd><a href="#">打底裤</a></dd>
<dd><a href="#">哈伦裤</a></dd>
</dl>
</li>
<li class="select-list">
<dl id="select3">
<dt>裙装：</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">连衣裙</a></dd>
<dd><a href="#">半身裙</a></dd>
<dd><a href="#">长袖连衣裙</a></dd>
<dd><a href="#">中长款连衣裙</a></dd>
</dl>
</li>
<li class="select-result">
<dl>
<dt>已选条件：</dt>
<dd class="select-no">暂时没有选择过滤条件</dd>
</dl>
</li>
</ul>
<script>
$(document).ready(function(){
$("#select1 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectA").remove();
} else {
var copyThisA = $(this).clone();
if ($("#selectA").length > 0) {
$("#selectA a").html($(this).text());
} else {
$(".select-result dl").append(copyThisA.attr("id", "selectA"));
}
}
});
$("#select2 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectB").remove();
} else {
var copyThisB = $(this).clone();
if ($("#selectB").length > 0) {
$("#selectB a").html($(this).text());
} else {
$(".select-result dl").append(copyThisB.attr("id", "selectB"));
}
}
});
$("#select3 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectC").remove();
} else {
var copyThisC = $(this).clone();
if ($("#selectC").length > 0) {
$("#selectC a").html($(this).text());
} else {
$(".select-result dl").append(copyThisC.attr("id", "selectC"));
}
}
});
$("#selectA").live("click", function () {
$(this).remove();
$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectB").live("click", function () {
$(this).remove();
$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectC").live("click", function () {
$(this).remove();
$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
});
$(".select dd").live("click", function () {
if ($(".select-result dd").length > 1) {
$(".select-no").hide();
} else {
$(".select-no").show();
}
});
// $(function(){
// $(".select dd").live("hover",function(){
// if($(".select-result dd").length > 1){
// $(".select-no").hide();
// }else{
// $(".select-no").show();
// }
// });
// })
});
/*www.jq22.com*/
</script>
</body>
</html>
白色的背景图，看得见吗？