<!DOCTYPE HTML>
<html lang="en-US">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
ol, ul {list-style: none;}
blockquote,q {quotes: none;}
a{text-decoration:none;color:#2d2f30;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;-o-transition: all .3s linear;-ms-transition: all .3s linear;transition: all .3s linear;}
a:focus{ outline:none;}
.content{margin:auto;1200px;}
.sx_updown{100%;border-top:1px solid #f2f2f2;background:#fff;overflow:hidden;padding:32px 0 40px 0;z-index:9999;position:absolute;left:0;top:60px;text-align:left;}
.updown_box{float:left;min-height:198px;388px;border-left:1px solid #f2f2f2;padding:0 50px;-webkit-box-sizing: content-box;-moz-box-sizing: content-box; box-sizing: content-box;}
.updown_box h3{font-size:16px;margin-bottom:18px;padding-left:10px;}
.updown_box ul li{float:left;margin:0 10px 10px 10px;}
.updown_box ul li a{display:block;font-size:14px;padding:6px 8px;line-height:18px;}
.updown_box ul li.selected a{background:#7ecbc8;color:#fff;}
.w136{136px;border-left:0;padding:0;}
.w290{290px;}
.w160{160px;padding:0 40px;}
.sousuo{padding:10px 0 36px 0;100%;}
.select-result{900px;float:left;}
.select-result ul li a{height:30px;padding:0 24px 0 10px;line-height:30px;display:block;position:relative;float:left;margin:0 10px 10px 0;color:#fff;font-size:14px;background:url(close1.png) 90% center no-repeat #7ecbc8;}
</style>
<head>
<meta charset="UTF-8">
<title>jQuery商品分类多项筛选菜单代码</title>
</head>
<body>
<div class="sx_updown clearfix">
<div class="content">
<div class="updown_box w136">
<h3>全部</h3>
</div>
<div class="updown_box w160">
<h3>按功能</h3>
<ul id="select2">
<li date-type="1"><a href="javascript:;">纤体</a></li>
<li date-type="2"><a href="javascript:;">提拉</a></li>
<li date-type="3"><a href="javascript:;" >嫩肤</a></li>
<li date-type="4"><a href="javascript:;">祛疤</a></li>
<li date-type="5"><a href="javascript:;">脱毛</a></li>
<li date-type="6"><a href="javascript:;">祛红</a></li>
<li date-type="7"><a href="javascript:;">祛黑</a></li>
</ul>
</div>
</div>
</div>
<div class="sousuo clearfix">
<div class="select-result clearfix">
<ul>
</ul>
</div>
</div>
<script type="text/javascript">
$("#select2 li").click(function() {
var type = $(this).attr("date-type");
var copyThisB = $(this).clone();
if ($(this).hasClass("selected")) {
$(".select-result li[date-type='" + type + "']").fadeToggle();
} else {
$(".select-result ul").append(copyThisB);
};
$(this).toggleClass("selected");
});
$(".select-result ul").delegate("li","click", function(){
var type = $(this).attr("date-type");
$(this).fadeOut();
$("#select2 li[date-type='" + type + "']").removeClass("selected");
});
</script>
</body>
</html>