Question

HTML：

<h3>PS elementum justo ligula</h3>

<div class="hide">elementum justo ligula, interdum scelerisque dui feugiat eget. Pellentesque at dignissim velit, eget volutpat lacus. Proin non metus eget quam efficitur maximus.
    <button class="hide">Close</button>
</div>

<h3>Justo ligula</h3>

<div class="hide">Pellentesque at dignissim velit, eget volutpat lacus. Proin non metus eget quam efficitur maximus. Nulla blandit eros eu placerat rhoncus. Quisque in faucibus nibh. Cras ultrices iaculis purus porta.
    <button class="hide">Close</button>
</div>

jquery的：

$("div.hide").hide();

$("h3").click(function () {
    $(this).next("div.hide").slideToggle("slow");
});

$("button.hide").click(function () {
    $(this).parents("div.hide").slideToggle("slow");
});

我设法让它工作：http://jsfiddle.net/qodgmhnd/

我只想让你检查一下：有更优雅的解决方案吗？

我需要再添加一件事：点击前一个内容而不是下一个标题。现在它关闭比父标题关闭或单击关闭按钮。

Answer 1

您可以使用单击处理程序来实现此目的。您也可以使用带有元素上下文的.parent()遍历直接父级：

$("button.hide,h3").click(function () {
 var target = $(this).is('h3') ? $(this).next("div.hide") : $(this).parent();
 target.slideToggle("slow");
});

<强> Working Demo

jQuery：在标题点击时切换内容

1 个答案: