<! DOCTYPE html>
<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;width:1200px;}
. sx_updown{width: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;width:388px;border-left:1px Solid #f2f2f2;p adding: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{width:136px;border-left:0;padding:0;}
. w290{width:290px;}
. w160{width:160px;padding:0 40px;}
. sousuo{padding:10px 0 36px 0;width:100%;}
. Select-result{width: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>
<meta charset= "UTF-8" >
<title>jquery Product Classification Multi-item Filter menu Code </title>
<body>
<div class= "Sx_updown clearfix" >
<div class= "Content" >
<div class= "Updown_box w136" >
</div>
<div class= "Updown_box w160" >
<ul id= "Select2" >
<li date-type= "1" ><a href= "javascript:;" > Slimming </a></li>
<li date-type= "2" ><a href= "javascript:;" > Lifts </a></li>
<li date-type= "3" ><a href= "javascript:;" > Skin rejuvenation </a></li>
<li date-type= "4" ><a href= "javascript:;" > Scar </a></li>
<li date-type= "5" ><a href= "javascript:;" > Hair Removal </a></li>
<li date-type= "6" ><a href= "javascript:;" > Dispel Red </a></li>
<li date-type= "7" ><a href= "javascript:;" > Dispelling Black </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>
jquery Medical Beauty Project Classification Multi-item Filter Menu code