0

我有许多 h3 元素，当它们在它们所在的 div 中被单击时，我会切换它们，但是打开当前单击的 h3 并关闭其他元素的最佳方法是什么？到目前为止，这是我的 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>
4

1 回答 1

1

你可以试试这个：

$('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);
});

当您单击一个元素时，最初将关闭该元素（因为已打开）以及所有其他元素。

下次单击元素时，将打开该元素并关闭其余元素。

演示：jsFiddle

于 2013-06-18T14:00:16.947 回答