JavaScript hasClass 忽略元素的类?

标签 javascript jquery filter jquery-isotope slidedown

我有一个Isotope过滤器菜单,我正在使用哈希历史记录,因此如果用户返回页面,过滤器仍然会被设置。由于我们使用 .slideDown 来展开子菜单项,因此当您返回页面时,即使选择了子菜单项中的某些过滤器,子菜单项也会隐藏。

我正在尝试使用:

if ($('#option1').hasClass('.selected')) {
    $('.level-two').slideDown('fast');
}

但是,由于“selected”类是由 jQuery 过滤器(同位素)生成的,因此它会被忽略。

fiddle :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');
}

最佳答案

我猜你漏掉了一个“.”

if ($('#option1').is('.selected')) {
    $('.level-two').slideDown('fast');
}

关于JavaScript hasClass 忽略元素的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13714843/

相关文章:

javascript - 如何让 form::select 运行脚本来更改目标,以便每次选择不同选项时样式都会发生变化?

javascript - 如何在使用 XmlHttpRequest 和 FormData 时设置边界

javascript - 如何隐藏元素onclick jquery

jquery - 如何告诉 jQuery 在找到第一个元素时停止搜索 DOM?

javascript - 防止触发 click()

javascript - AngularJS 过滤器数据绑定(bind)

javascript - 删除本地存储数据的方法有哪些?

javascript - jQuery 重置 newsticker 的先前效果而不是通过单击替换为新效果

javascript - 返回仅包含与给定值匹配的元素的过滤数组

python - 如何过滤字符串?