jquery - 在四重嵌套表上使用 jquery Accordion 需要帮助

Question

我是一个完整的网络语言菜鸟，如果我不能很好地解释这一点，或者如果它非常简单，请原谅我。作为目前的一项附带任务，我的经理希望通过任何必要的方式将列表（与 reddit 侧边栏非常相似）变成一个可折叠的集合，以消除一些混乱。布局始终是：

头

内容

头

内容

这是我正在使用的来源。

这是我尝试手风琴的一个（可能做错了）jsfiddle。请注意，它应该是逐行的，但同样，在这些东西上完成 noob 等等。
HTML：

<div>
        <tr class="head">
              <td colspan="2" valign="top"><span class="style106">head1</span></td>
        </tr>
        <tr class="content">
          <td>&nbsp;</td>
          <td valign="top"><a href="http://www.google.com" target="_blank">content1</a></td>
        </tr>
    </div>
    <div>
        <tr class="head">
          <td colspan="2" valign="top"><span class="style106">head2</span></td>
        </tr>

        <tr class="content">
          <td>&nbsp;</td>
            <td valign="top"><a href="http://www.google.com" target="_blank">content2</a></td>
        </tr>
    </div>

Javascript：

$(document).ready(function(){
  $('.head').click(function(e){
    e.preventDefault();
    $('.head').parent('div').find('.content').not(':animated').fadeToggle(500);
   });
});

Answer 1

这个解决方案对你有用吗？

http://jsfiddle.net/QtNbC/4/

<div id="collapseMenu">

  <div class="head"><span class="style106">head1</span></div>
  <div class="content"><a href="http://www.google.com" target="_blank">content1</a></div>

  <div class="head"><span class="style106">head2</span></div>
  <div class="content"><a href="http://www.google.com" target="_blank">content2</a></div>

</div>

和：

$(document).ready(function(){

  var $contents = $("#collapseMenu .content").hide();
  var $heads = $("#collapseMenu .head").on( "click" , function(e) {

    var $next = $(this).next( $contents );
    $contents.not( $next ).slideUp();
    $next.slideToggle();
    e.preventDefault();

  });

});

这里的理论是：

我们创建一个collapseMenu包装器，然后将所有的heads 和contents 成对放置。每次我们click在 ahead我们告诉 jQuery 找到next() content然后slideToggle()它。我们还告诉 jQuery 给slideUp()所有的contents，以便没有一个同时打开。（如果您愿意，可以禁用此功能）。