Question

我是一个完整的网络语言菜鸟，所以请原谅我，如果我不能解释这个，或者它是非常容易的。作为一项副作用，我的经理希望通过任何必要的手段将清单（非常类似于reddit侧边栏）变成可折叠的集合，以消除一些混乱。布局总是：

头

含量

头

含量

Here是我正在使用的来源。

Here是一个（可能做错了）jsfiddle，我正在尝试手风琴。请注意，它应该是逐行，但同样，在东西等完整的菜鸟等 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包装器，然后我们将所有head和content成对放置。每当我们click head时，我们都会告诉jQuery找到next() content然后slideToggle()。我们还告诉jQuery slideUp()所有content s，以便没有一个同时打开。（如果您愿意，可以禁用此功能）。

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

1 个答案: