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切换关闭其他元素

回答

相关问题