<!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>
![](https://images2015.cnblogs.com/blog/899631/201612/899631-20161215095954464-243534426.gif)