jQuery切換關閉其他元素

我有一些h3元素，當它們在它們所在的div中被點擊時切換，但是打開當前點擊的h3並關閉其他元素的最好方法是什麼？這裏是我的jQuery至今：jQuery切換關閉其他元素

$('h3[id^="dd_featprod"]').click(function(){ 
     var id = $(this).attr('id'); 
     var theProd = id.split("+")[1]; 
     var thelist = ".dd_fp" + theProd; 
     $(thelist).toggle(500); 
});

的HTML具有這種結構：

<div> 
    <ul> 
    <li><h3 id="dd_featprod+RW7" class="toggle_closed"><a href="javascript:;">Group</a></h3></li> 
    </ul> 
    <ol class="dd_fpRW7"> 
    <li><a href="http://www.abc.com/pdf/specification.pdf" target="_blank">Product One</a></li> 
    <li><a href="http://www.abc.com/product.asp?page=geo" target="_blank">Product Two</a></li><ul> 
    <li><h3 id="dd_featprod+RW8" class="toggle_closed"><a href="javascript:;">Item one</a></h3></li> 
</ul> 
    <ol class="dd_fpRW8"> 
     <li>Sub item one</li> 
     <li>Sub item two</li> 
    </ol>

來源

2013-06-18 stephmoreland

您可以更新HTML給另一H3的一個例子嗎？ – jammykam

聽起來像http://jqueryui.com/accordion/！？ – developer10214

認真嗎？ [關閉所有，但這個jQuery]（https://www.google.com/webhp?q=close%20all%20except%20this%20jquery） – mplungjan

你可以試試這個：

$('h3[id^="dd_featprod"]').click(function(){ 
     var id = $(this).attr('id'); 
     var theProd = id.split("+")[1]; 
     var thelist = ".dd_fp" + theProd; 
     $('ol').not(thelist).hide(500); 
     $(thelist).toggle(500); 
});

當你點擊一個元素，initally將關閉該元素（因爲被打開）和其他每個元素。

下次單擊元素將打開該元素並關閉其餘元素。

DEMO：jsFiddle

來源

2013-06-18 14:00:16 Wallack

非常感謝，這工作！ – stephmoreland

不客氣！祝你好運！ – Wallack

jQuery切換關閉其他元素

回答

相關問題