jQuery的菜單中，展開並點擊

我用這個例子的工作縮回菜單： http://codepen.io/anon/pen/gBCJK/jQuery的菜單中，展開並點擊

的問題是，當我有一個類別擴大，我點擊一個又一個，我希望所有其他擴展類別收回，只留下最後一個點擊打開。另外，如果您單擊一個子類別，則菜單將縮回。

關於如何解決它的任何想法？

2014-03-27 Ivan

你不應該依賴高度，只需添加css類的高度（回答與JavaScript相關的優化已被其他人給出） – FibreFoX

你可以在所有，但最後單擊項目重置CSS max-height: 33px;規則如下：

$('.item').click(function(){ 
    $('.item').not(this).css('max-height', '33px'); 
    $(this).css('max-height','429px') 
});

這也保證了菜單，當你點擊一個子類別不垮，因爲雖然你還在制定.item div上的點擊事件，最大高度不會從當前「活動」中移除。

來源

2014-03-27 15:49:14 John

謝謝，我試過這個，它的工作原理，但它似乎並沒有工作在IE 9和以下...或者我正在搞點東西 – Ivan

你好伊萬。我現在無法在舊版瀏覽器中進行測試，但我決定對您的示例進行重新編碼，並在這裏使用稍微不同的jQuery方法。 [你可以在這裏找到]（http://codepen.io/anon/pen/dzIwy/）。它利用列表，通常首選此類菜單，並使用jQuery slideUp（）和slideDown（）效果來處理動畫，而不是使用最大高度和轉換。如果它適合你，請讓我知道，我會編輯它到我的答案。 – John

-1

我認爲，你可以通過重新組織你的子項到的div 但蠻力的辦法是重置「項目」的任何點擊元素的尺寸找到一個更好的辦法。

$(document).ready(function(){ 
    $('.item').click(function(){ 
     $('.item').css('max-height','33px'); 

     if($(this).css('max-height') == '33px') { 
       $(this).css('max-height','429px') 
     } 
    }); 
});

來源

2014-03-27 15:56:04 Pyresq

我認爲這種切換最好是使用類（例如「打開」）來控制樣式更改並顯示狀態。

您可以在this fiddle中看到我的更改，但這裏有一個總結。「open」項目的新CSS類。

#accordion .item.open { 
    max-height: 429px; 
}

和新的Click事件代碼：

$('.item').click(function(){ 
    $(this).siblings('.open').addBack().toggleClass('open'); 
});

它選擇單擊的項目，所有的兄弟姐妹有一類「開放式」的（具有相同的父元素），並切換它（所以關閉未清項目並打開已關閉的項目）。

來源

2014-03-27 16:34:21 MStrutt

jQuery的菜單中，展開並點擊

回答

相關問題