我有一个同位素过滤器菜单,并且我正在使用哈希历史记录,因此如果用户返回该页面,过滤器仍会设置。因为我们使用 .slideDown 来展开子菜单项,所以当您返回页面时,即使选择了其中的一些过滤器,子菜单项也会被隐藏。
我正在尝试使用:
if ($('#option1').hasClass('.selected')) {
$('.level-two').slideDown('fast');
}
但是,由于“选定”类是由 jQuery 过滤器(同位素)生成的,因此它被忽略了。
小提琴:http: //jsfiddle.net/RevConcept/swT84/
HTML:
<nav>
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden"><a href="#filter-location-any" data-filter-value="" class="selected">any</a></li>
<li><a id="option1" href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a></li>
<li><a id="option2" href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a></li>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden"><a href="#filter-illumination-any" data-filter-value="" class="selected">any</a></li>
<li><a href="#filter-illumination-illuminated" data-filter-value=".illuminated" class="trigger-three">illuminated</a></li>
<li><a href="#filter-illumination-non-illuminated" data-filter-value=".non-illuminated" class="trigger-three">non-illuminated</a></li>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden"><a href="#filter-mount-any" data-filter-value="" class="selected">any</a></li>
<li><a href="#filter-mount-wall" data-filter-value=".wall">wall</a></li>
<li><a href="#filter-mount-ground" data-filter-value=".ground">ground</a></li>
</ul>
</div>
</div><!--end options-->
</nav>
CSS:
header nav ul.level-two, header nav ul.level-three {
display:none;
}
JavaScript:
$(function(){
$('.level-one').hide().fadeIn('fast');
});
$(".trigger-two").one('click', function(){
$(".level-two").slideDown('fast');
});
$(".trigger-three").one('click', function(){
$(".level-three").slideDown('fast');
});
if ($('#option1').is('selected')) {
$('.level-two').slideDown('fast');
}