我正在使用http://mixitup.io/库为我简单的项目列表提供过滤.一切都很好,除了一件事:我需要的多级过滤器.
我有两种类型的过滤,一种基于"类型",一种基于"制造商".所以,假设我想从"manufacturer1"或其他组合中显示"typeA".项目需要满足列表中显示的那些项目.
我无法实现这一点,点击过滤器后,我只能显示"typeA",其中包括所有制造商,或"manufacturerA",它显示多种类型,但这不是我想要的.
我已经将jsfiddle包含在我现在的代码中:http://jsfiddle.net/QtQnB/62/
对于过滤器,我使用了这个:
<div id="filter">
<span>Type</span>
<ul class="filter-list">
<li data-filter="lemon" class="filter" data-dimension="type"><a href="#">Lemon</a></li>
<li data-filter="orange" class="filter" data-dimension="type"><a href="#">Orange</a></li>
<li data-filter="apple" class="filter" data-dimension="type"><a href="#">Apple</a></li>
</ul>
<span>Manufacturer</span>
<ul class="filter-list">
<li data-filter="1" class="filter" data-dimension="manufacturer"><a href="#">1</a></li>
<li data-filter="2" class="filter" data-dimension="manufacturer"><a href="#">2</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
项目清单如下:
<ul id="grid">
<li class="mix lemon small">
<h3> small Lemon</h3>
<p>Some text here</p>
</li>
<li class="mix orange small">
<h3>small Orange</h3>
<p>Some text here</p>
</li>
<li class="mix apple medium">
<h3>medium Apple</h3>
<p>Some text here</p>
</li> …Run Code Online (Sandbox Code Playgroud)