带有jquery的html中的可折叠列表

Question

我正在尝试为我们的博客制作一个可折叠的日期选择器。我查看了大量 JavaScript/jquery/css 示例，但似乎无法让它们中的任何一个与 3 级列表一起正常工作。 这是我想要完成的布局：

>2012
  >July
    >title of muh new blag!

这里是标签：

<ul class="example_menu">
  <li><a class="expanded">Section A</a>
    <ul>
      <li><a href="#">Link A-A</a>
        <ul>
          <li><a href="#">Link A-A-A</a></li>
      <li><a href="#">Link A-A-B</a></li>
     </ul>
       </li>
       <li class="active"><a href="#">Link A-B</a></li>
       <li><a href="#">Link A-C</a></li>
       <li><a href="#">Link A-D</a></li>
    </ul>
  </li>
  <li class="footer"><span> </span></li>
  <li><a class="collapsed">Section B</a>
    <ul>
      <li><a href="#">Link B-A</a>
        <ul>
      <li><a href="#">Link B-A-A</a></li>
      <li><a href="#">Link B-A-B</a></li>
      <li><a href="#">Link B-A-C</a></li>
        </ul>
      </li>
      <li><a href="#">Link B-B</a>
        <ul>
      <li><a href="#">Link B-B-A</a></li>
      <li><a href="#">Link B-B-B</a></li>
        </ul>
      </li>
      <li><a href="#">Link B-C</a></li>
      <li><a href="#">Link B-D</a></li>
    </ul>
  </li>
  <li class="footer"><span> </span></li>
  <li><a class="collapsed">Section C</a>
    <ul>
      <li><a href="#">Link C-A</a></li>
      <li><a href="#">Link C-B</a></li>
      <li><a href="#">Link C-C</a></li>
      <li><a href="#">Link C-D</a></li>
    </ul>
  </li>
  <li class="footer"><span> </span></li>
</ul>

我正在尝试做一些简单的事情，比如 blogspot 的博客存档。 (Check it out here on this guy's page)

我发现并最喜欢这个的是this one。在去掉了很多额外的代码之后，我得出了这个：

$('.example_menu li > .expanded').show('normal');

$('.example_menu li > a').click(function() {

$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('ul').toggle('normal');

});

此列表可扩展和收缩，非常适合简单的 2 级列表，例如：

>Year
    >Month

但是，对于 3 级列表，它要么在扩展 2 个更深的级别时折叠，要么同时扩展两个级别。我正在尝试使最下面的列表折叠/展开，并使最下面的列表折叠直到直接激活。

有没有更简单的jquery可折叠列表？

或者有没有一种很好的方法来获取直接的内部 ul 元素并切换该元素，同时将所有其他内部 ul 元素转换为折叠？

Answer 1

显然我快到了。

//hide everything
$('.outline li > ul').hide();
//activate class "expanded"
$('.outline li > .expanded + ul').show('normal');
$('.outline li > a').click(function() {
//hide everything
$(this).find('ul').hide();
//toggle next ul
$(this).toggleClass('expanded').toggleClass('collapsed').next('ul').toggle('normal');
});