Question

我有标题，每个标题都有子项。当我点击标题时，我希望它切换查看或显示标题内容：

这是我到目前为止所做的：

$j('h2').click(function() {
if ($j(this).next().is(":hidden")) {
    $j(this).next().show();
} else {
    $j(this).next().hide();
}
});

我的HTML看起来像这样：

<ul class="submenu">
            <li class="section"><h2>Section One</h2>
                <ul>

                    <li>text</li>


                    <li>text</li>
<li>text</li>

                </ul>
            </li>

            <li class="section"><h2>Section Two</h2>
                <ul style="display: none; overflow-x: visible; overflow-y: visible; ">
<li style="">
                            text</li><li>
                            text</li><li>
                            text</li></ul>
                </li>

        </ul>

Answer 1

您可以按照自己的方式进行，或使用.slideToggle()使用幻灯片效果，如下所示：

$('h2').click(function() {
  $(this).next().stop(true, true).slideToggle();
});

You can test it here

使用.toggle()（test here）即时没有幻灯片效果：

$('h2').click(function() {
  $(this).next().toggle();
});

使用.toggle(speed)（test here）进行幻灯片+淡入淡出效果，如下所示：

$('h2').click(function() {
    $(this).next().stop(true, true).toggle("fast");
});

在每种情况下，对.stop()的调用都是为了防止动画队列建立。此代码适用于$ == jQuery的大多数用户，看起来您正在使用.noConflict()，因此只需将$替换为$j，就像您当前的代码一样。

Answer 2

这是一个关于这个主题的好教程：

http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery

如果您想继续使用列表中的<h2>标记，则必须稍微调整一下，但这应该是微不足道的。

jQuery：如何制作可折叠的树导航？

2 个答案: