正在關閉手風琴再次打開相同的手風琴元素

只需使用jQuery設置一個簡單的手風琴即可。基本結構是H3作爲標題，下面的div用作容器。打開和關閉元素時，我正在使用以下代碼並且工作正常：正在關閉手風琴再次打開相同的手風琴元素

var panels = $('#edit-options > .option-category > div.options').hide(); 

    $('#edit-options > .option-category > h3').click(function() { 
     panels.slideUp(); 
     $(this).next().slideDown(); 
     $(this).toggleClass('open'); 
     return false; 
    });

當試圖關閉相同的手風琴時發生問題;它只在關閉後立即重新開放。任何幫助是極大的讚賞。

來源

2014-03-12 Threaded

我敢肯定，我們可以幫助你，如果你重新創建一個的jsfiddle問題，並在你的問題中添加一個鏈接。 –

道歉的傢伙。我在這裏可悲的不足。請原諒HTML中的錯誤標記。這是來自Drupal構建。（另外，底部的兩個元素將不起作用，因爲我將在模板文件中清理這些元素，以便它們能夠在正確的區域內生存，現在可以忽略它們）。 http://jsfiddle.net/#&togetherjs=jOP4UlFnfB – Threaded

This Fiddle顯示答案。請注意幾件事情。。。

無論何時手風琴的頭部被點擊，您的代碼都會調用slideDown()。

$('#edit-options > .option-category > h3').click(function() { 
    panels.slideUp(); 
    $(this).next().slideDown(); 
    . . . . 
});

當用戶單擊一個打開的手風琴標題僅僅隱藏其內容時，此行爲就會中斷。下面的代碼首先檢查點擊的標題是否代表敞開的手風琴。如果是這樣，那麼你不想打電話slideDown()就可以了。

$('#edit-options > .option-category > h3').click(function() { 
    panels.slideUp(); 
    if($(this).hasClass('open')) { 
     $(this).removeClass('open') // we just closed this accordion and don't need to open a new accordion tab 
    } else { //we need to open a new accordion tab and mark it as the tab that is open 
     $('#edit-options > .option-category > h3').removeClass('open'); 
     $(this).next().slideDown(); 
     $(this).toggleClass('open'); 
    }; 
    return false; 
});

而且，你的HTML有它加載的價格範圍頭與一類「開放」的錯誤。

<h3 class="open">Price Range</h3>

這是一個錯誤，因爲在頁面載入時沒有手風琴是開放的。標籤應該僅僅是：

<h3>Price Range</h3>

希望這有助於

來源

2014-03-12 22:18:09

很好的答案chuck。非常感謝修訂小提琴和澄清。 – Threaded

很高興我能幫上忙 –

正在關閉手風琴再次打開相同的手風琴元素

回答

相關問題