JQuery slideToggle 函数 issue/how 到

Question

我正在尝试使用 JQuery 和 slideToggle() 在单击特定 header 时向下滑动隐藏行。我试图用 1 jQuery 语句来做到这一点。我知道我可以为每个 div 标签创建一个 id，并为每个被点击的 'header row' 创建一个单独的函数，但我真的不想这样做。

在下面的代码示例中，我只能获取第一行来执行 slideToggle，但我不知道如何在单击 'header row' 时让另一行滑动。

如有任何帮助，我们将不胜感激。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(this).click(function(){
    $("#Content").slideToggle("slow"); /* Using this only toggles the first set of data */

    });
});
</script>
</head>
<body>
<div>
    <!-- Row 1 -->
    <div id="Label">
        1st Header:
    </div>
    <div id="Content">
        Data 1
        <br />
        Data 2
    </div>

    <!-- Row 2 -->
    <div id="Label">
        2nd Header
    </div>
    <div id="Content">
        Data 3
        <br />
        Data 4
    </div>
</div>
</body>
</html>

Answer 1

Demo

<div>
    <!-- Row 1 -->
    <div class="Label">
        1st Header:
    </div>
    <div class="Content">
        Data 1
        <br />
        Data 2
    </div>

    <!-- Row 2 -->
    <div class="Label">
        2nd Header
    </div>
    <div class="Content">
        Data 3
        <br />
        Data 4
    </div>
</div>

Javascript

$(document).ready(function()
{
    $(".Label").click(function()
    {
        $(this).next().stop().slideToggle("slow"); 
    });
});

Answer 2

你想完成的事情很简单，有很多方法可以完成。下面是一种简单的方法，它依赖于 header 和内容按上面的顺序排列，但首先不要创建重复的 ID。出于多种原因，您希望所有 ID 都是唯一的。

您要做的是更改它，使 header 有一个 class，内容有另一个 class。 https://jsfiddle.net/n1e7w5fL/1/

这是html

    <div>
<!-- Row 1 -->
<div class="clickHeader">
    1st Header:
</div>
<div class="clickTarget">
    Data 1
    <br />
    Data 2
</div>

<!-- Row 2 -->
<div class="clickHeader">
    2nd Header
</div>
<div class="clickTarget">
    Data 3
    <br />
    Data 4
</div>

这是 jquery 来切换它们

$(document).ready(function(){
    $(".clickHeader").on("click", function(){
        $(this).next(".clickTarget").slideToggle("slow");
    });
});

JQuery slideToggle 函数 issue/how 到

JQuery slideToggle function issue/how to

jquery

slidetoggle