简单展开/折叠divs> JQuery？

Question

我需要在我的应用程序中为一系列父容器div添加一些手风琴样式展开/折叠句柄.这对于像jquery这样的库来说太简单了吗？

例:

<div class="handleDiv"> expand | collapse
    <div>child element</div>
    <div>child element</div>
</div>

<div class="handleDiv"> expand | collapse
    <div>child element</div>
    <div>child element</div>
</div>

Answer 1

尝试这样的事情：

$('.handleDiv').click(function() {
    $(this).children().toggle();
});

每当您单击“handleDiv”时，都会展开或隐藏“handleDiv”的内容。不过，我建议制作那些“展开|折叠”的东西链接并将点击处理程序附加到它们，这样在 div 中的任何地方点击都不会切换它。

如果您希望它们开始时关闭，请在样式表中将它们设置为关闭：

.handleDiv div {
    display: none;
}

或者在我的答案开头的 jQuery 代码片段末尾添加一个“.hide()”。