JavaScript hasClass忽略元素的類？

我有一個Isotope過濾器菜單，我使用哈希歷史，所以如果用戶回到頁面，過濾器仍然設置。因爲我們使用.slideDown來展開子菜單項，所以即使選擇了其中的某些過濾器，當您返回頁面時，子菜單項也會隱藏。JavaScript hasClass忽略元素的類？

我試圖使用方法：

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

來源

2012-12-05 RevConcept

而不是複製每個點擊與重複功能相同的過程，你可以總是以編程方式觸發點擊.selected錨點。

$('.option-combo a.selected').trigger('click');

小提琴：http://jsfiddle.net/jgkwd/

來源

2012-12-05 02:15:21 qooplmao

這在小提琴上很漂亮...但由於某些原因，當我回到我的開發站點上的頁面時，子菜單選項又被隱藏了：[example]（http://revelationconcept.com/hosting/trademark_temp/ ） – RevConcept

我可能是錯的，但可能是因爲您的頁面中包含JavaScript文件的順序。添加.selected類的腳本被添加到切換腳本之後，所以'$（document）.ready（function（））'和'$（function（））'（與我所知的相同）正在排隊，然後以錯誤的順序調用。 – qooplmao

我曾嘗試過，並沒有幫助，但我認爲在那時我遇到了其他問題的組合......您是對的！太感謝了 ;） – RevConcept

我猜你是缺少

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

來源

2012-12-05 01:20:36

是的，我很感謝......但添加它不能解決問題。如果我在元素上創建自己的類並使用它，那麼它就可以工作......它只對動態的「selected」類有問題。 – RevConcept

你怎麼設置課程。它是使用addClass（） –

我沒有直接做它，它內置到同位素選項中......但是，看起來他們使用的是addClass/removeClass等。如果你去我的[小提琴]（http：// jsfiddle.net/RevConcept/swT84/2/），你會在javascript區域的底部看到「ISOTOPE SETTINGS」。 – RevConcept

JavaScript hasClass忽略元素的類？

回答

相關問題