jQuery製作淘寶商城商品列表多條件查詢功能

一、介紹

這幾天做網站的時候，突然用到這個功能，找了好久也沒有找到。看到”希偉素材網“有這麼一個JS，效果很不錯，也正是我一直以來想要的結果。附圖如下：

 

二：使用教程

    

1、HTML程式碼：

 

<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>