jQuery的toggleClass後第二次點擊

$('.nav-right').toggleClass('open closed');

在被切換兩班兩班之間切換一次，因爲無論這些類的標記被應用在頁面加載時，我不希望他們成爲。這些類應用一個我不想在頁面加載時顯示的動畫。

我想在第一次點擊某個元素時應用.open，然後在第二次點擊時應用.closed，並在之後的每次點擊之間切換兩者。

Here's a simplified pen如果你想檢查它的基本操作。我在Google上搜索或發現的所有內容都指向toggleClass，但在這種情況下似乎不起作用。

Here is another pen我正在嘗試實現完整的動畫。當你點擊圖標時，你可以看到導航元素如何從右到左逐個淡出 - 我希望當你再次單擊時，他們會從左向右淡入，這是我通過應用封閉類實現的。如果我已經將該類應用於該屬性，那麼導航元素會在頁面加載時淡入，這並不是我想要的。

來源

2015-10-29 surfbird0713

做試試這個，

$('.nav-right').click(
    function(){ 
if($(this).hasClass('open')) 
{ 
    $(this).removeClass('open'); 
    $(this).addClass('closed'); 
    } 
else{ 
    $(this).addClass('open'); 
    $(this).removeClass('closed'); 
    } 
    });

來源

2015-10-29 18:42:34

謝謝，這種方法爲我做了！ – surfbird0713

代碼將按原樣運行，但您需要nav-right屬性上的初始search-closed *類，以便類切換到每個狀態。

您可以

$('.nav-right').toggleClass('search-closed',true);

Updated Pen

來源

2015-10-29 17:40:48 Shanimal

謝謝，但是這並不完全我想要的。我不想在最初應用關閉屬性。我用第二支筆更新了我的問題，以便了解我想要實現的目標。我感謝您的幫助！ – surfbird0713

明白了，更新了我的答案。 – Shanimal

這似乎仍然是在頁面加載時最初添加一個類。所有導航元素應該同時出現，其餘頁面首先顯示。 – surfbird0713

jQuery的toggleClass後第二次點擊

回答

相關問題