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＆gt; .expanded'）。show（'normal'）;

$（'。example_menu li＆gt; a'）。click（function（）{

$（本）.toggleClass（ '扩展'）toggleClass（ '折叠'）的父（）找到（ 'UL'）切换（ '正常'）;。。。。

}）;

这列出了扩展和合同，并且适用于简单的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');
});

Answer 2

如果它有帮助，试试这个...... https://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/ 他们有一个zip文件供您参考..

html中的可折叠列表与jquery

2 个答案: