同位素:在项目选择中淡入过滤器?

时间:2012-10-04 03:15:05

标签: jquery html5 jquery-isotope

我不知道怎么会这样做,所以我想在这里问。

我正在尝试将Isotope用于身体部位说明,但我在页面上有许多过滤器选项。下面是代码:

<ul id="options" class="combo-filters ">
<li class="level-1 parent-active first">
<a href="/instructions/">Body Part</a>
<div class="option-combo bodypart">
<ul class="filter option-set clearfix " data-filter-group="bodypart"> 
<li><a href="#filter-bodypart-all" data-filter-value="" class="selected">all</a></li>
<li><a href="#filter-bodypart-chest" data-filter-value=".chest">Chest</a></li>
<li><a href="#filter-bodypart-legs" data-filter-value=".legs">Legs</a></li>
<li><a href="#filter-bodypart-back" data-filter-value=".back">Back</a></li>
<li><a href="#filter-bodypart-shoulders" data-filter-value=".shoulders">Shoulders</a></li>
<li><a href="#filter-bodypart-arms" data-filter-value=".arms">Arms</a></li>
</ul>
</div>
<div class="option-combo goal">
<a href="/instructions/">Goal</a>
<ul class="filter option-set clearfix " data-filter-group="goal"> 
<li><a href="#filter-goal-all" data-filter-value="" class="selected">all</a></li>
<li><a href="#filter-goal-mass" data-filter-value=".mass">mass</a></li>
<li><a href="#filter-goal-shaping" data-filter-value=".shaping">shaping</a></li>
</ul>
</div>
<div class="option-combo focusarea">


<a href="/instructions/">Chest</a>
<ul class="filter option-set clearfix " data-filter-group="focusarea"> 
<li><a href="#filter-focusarea-all" data-filter-value="" class="selected">all</a></li>

<!-- Chest -->
<li><a href="#filter-focusarea-upper" data-filter-value=".upper">upper</a></li>
<li><a href="#filter-focusarea-middle" data-filter-value=".middle">middle</a></li>
<li><a href="#filter-focusarea-lower" data-filter-value=".lower">lower</a></li>
</ul>

<a href="/instructions/">Back</a>
<ul class="filter option-set clearfix " data-filter-group="focusarea"> 
<li><a href="#filter-focusarea-all" data-filter-value="" class="selected">all</a></li>

<!-- Back -->
<li><a href="#filter-focusarea-width" data-filter-value=".width">width</a></li>
<li><a href="#filter-focusarea-thickness" data-filter-value=".thickness">thickness</a></li>
<li><a href="#filter-focusarea-lowerback" data-filter-value=".lowerback">lower back</a></li>
</ul>


<a href="/instructions/">Shoulders</a>
<ul class="filter option-set clearfix " data-filter-group="focusarea"> 
<li><a href="#filter-focusarea-all" data-filter-value="" class="selected">all</a></li>
<!-- Shoulders -->
<li><a href="#filter-focusarea-sidedelt" data-filter-value=".sidedelt">side delt</a></li>
<li><a href="#filter-focusarea-rearposteriordelt" data-filter-value=".rearposteriordelt">rear posterior delt</a></li>
<li><a href="#filter-focusarea-traps" data-filter-value=".traps">traps</a></li>
<li><a href="#filter-focusarea-allshoulderheads" data-filter-value=".allshoulderheads">all shoulder heads</a></li>
<li><a href="#filter-focusarea-anteriorfrontdelt" data-filter-value=".anteriorfrontdelt">anterior front delt</a></li>
</ul>

<a href="/instructions/">Legs</a>
<ul class="filter option-set clearfix " data-filter-group="focusarea"> 
<li><a href="#filter-focusarea-all" data-filter-value="" class="selected">all</a></li>


<!-- Legs -->
<li><a href="#filter-focusarea-glutes" data-filter-value=".glutes">glutes</a></li>
<li><a href="#filter-focusarea-calves" data-filter-value=".calves">calves</a></li>
<li><a href="#filter-focusarea-thighs" data-filter-value=".thighs">thighs</a></li>
<li><a href="#filter-focusarea-hamstrings" data-filter-value=".hamstrings">hamstrings</a></li>
<li><a href="#filter-focusarea-quads" data-filter-value=".quads">quads</a></li>

</ul>


<a href="/instructions/">Arms</a>
<ul class="filter option-set clearfix " data-filter-group="focusarea"> 
<li><a href="#filter-focusarea-all" data-filter-value="" class="selected">all</a></li>

<!-- Arms -->
<li><a href="#filter-focusarea-biceps" data-filter-value=".biceps">biceps</a></li>
<li><a href="#filter-focusarea-triceps" data-filter-value=".triceps">triceps</a></li>
<li><a href="#filter-focusarea-forearms" data-filter-value=".forearms">forearms</a></li>


</ul>

</div>
</li>

</ul>

我要做的只是显示“身体部位”和“目标”,如果选择了身体部位下的“胸部”,它将在“胸部”焦点区域淡入,加载“全部,上部,中,下“选项。

最好的办法是什么?

1 个答案:

答案 0 :(得分:0)

请参阅plugin author's documentation here中的复杂过滤,并在Chrome的devtools面板中进行检查。