的jQuery/JavaScript的顯示/隱藏事件

Question

我只是鑽研的JavaScript的世界，有關於一個難題，我目前遇到的查詢....

我有一個菜單按鈕，揭示和隱藏我正在工作的網站上的導航菜單。對於此菜單按鈕，我附加了一些JavaScript以在導航欄顯示時「隱藏」主要網站內容，並在導航欄隨後關閉時「顯示」主要內容再次。

我編碼的JavaScript做的工作，但我知道這是不對的，而且我不知怎麼省了它！我知道這一點，因爲'reveal'和'hide'元素的腳本的計時值相互影響......使得設置動畫的時間有點不可預測，無法準確設置。

菜單按鈕，顯示和隱藏導航菜單具有附接至其以下類：

.menu-toggle 

並且當點擊它以顯示導航欄添加一個額外的類，這是：

.toggled-on 

所以它的點擊狀態類：

'.menu-toggle toggled-on' 

這裏是個ËJS控制網站內容的隱藏和暴露：

$(document).on('click', '#menu-toggle', function() { 
    $('.site-content').animate({opacity:1, visibility:'visible'}, 100); 
}); 

$(document).on('click', '.toggled-on', function() { 
    $('.site-content').animate({opacity:0, visibility:'visible'},  300); 
}); 

我相信這個問題是因爲類的分配而產生的仍然是兩個「正常」和「點擊」菜單按鈕的狀態。

我想我需要做somethng這樣的：

$(document).ready(function(){ 

    if ($('#menu-toggle').hasClass('toggled-on')) { 
    $('#menu-toggle').addClass('nav-on'); 
    } else { 
    $('#menu-toggle').addClass('nav-off'); 
    } 

}); 

然而，這是行不通的。

如果任何人都可以指示我如何更好地編碼的方向，那麼將不勝感激。

Answer 1

如果我理解正確，你想切換類。你可以試試http://api.jquery.com/toggleclass/。

讓我知道它是否適合你！

感謝

卡邁勒

Answer 2

$(function() { 
    $('body').on('click', '#menu-toggle', function() { 
     $('.site-content').toggle(300) 
    }) 
}) 

上面的代碼將導致.site-content div來淡入和淡出當你點擊#menu-toggle。

在jQuery函數$()內包裝函數文字只是$(document).ready()的簡寫。你可以用任何方式寫它，它的工作原理是一樣的。我喜歡更簡潔的語法。

jQuery中的.toggle()方法只是簡單地切換元素的可見性。您不需要更改類或直接操作不透明度或可視性來執行此操作。 jQuery檢測它是否可見並負責其餘部分。您可以添加持續時間以獲得淡入淡出效果。

我將綁定委託給body標籤，因爲我不知道您的HTML結構。如果.site-content有一個包裝div，可以委託給它（這個想法是將事件委託給事件目標更有效，而不是讓事件直到文檔）。

享受！

更新來自OP：

感謝reply.This確實切換的內容，但我 使用的知名度和透明度屬性，因爲我不想讓 佈局改變時在.site內容是hidden.When能見度 切換含量顯着完全自敗

新的解決方案：

我不知道你是什麼樣的佈局/ CSS的樣子，但我認爲這是你想要的...

添加以下的CSS樣式爲.site-content：

visibility: visible; 

現在添加下面的CSS規則：

.site-content.hidden { 
    visibility: hidden; 
} 

現在的JS代碼更改爲以下：

$(function() { 
    $('body').on('click', '#menu-toggle', function() { 
     $('.site-content').toggleClass('hidden') 
    }) 
}) 

樣式visibility: hidden意味着您將不再看到該元素，但它仍然是文檔流的一部分。換句話說，它仍然佔用佈局空間。此更改不會影響其餘佈局。

現在，當你點擊#menu-toggle它會添加或刪除隱藏的類。