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

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

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

$(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

Answer 2

您可以执行以下操作

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

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

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

2 个答案: