javascript - jQuery 显示/隐藏没有特定类/id 的多个元素

Question

我有以下 HTML 和 JS 代码来显示/隐藏一个 div。目前它工作正常。但是我想在一个页面上使用多个 Box，所以我需要一个函数来知道单击了哪个 box-header。

是否可以在点击 box-header div 之后只触发 box-content div？如果我不必为每个盒子都使用特定的 ID，那就太好了。

这是我的代码:

HTML:

<div class="content-box">
    <div class="box-header open-close">
        Title
    </div>
    <div class="box-content">
        Content
    </div>
</div>

JS:

$(document).ready(function(){
    $(".box-content").hide();

    $(".open-close").click(function () {
        $(".box-content").slideToggle("slow");
    });
});

Answer 1

您可以找到与单击的open-close 元素相关的box-content 元素。

从给定的标记来看，它是被点击元素的下一个元素

$(document).ready(function(){
    $(".box-content").hide();

    $(".open-close").click(function () {
        //as @insertusernamehere said the selector ".box-content" is not required
        //$(this).next(".box-content").slideToggle("slow");
        $(this).next().slideToggle("slow");
    });
});

演示:Fiddle