Question

我正在尝试使用JQuery和slideToggle（）在单击特定标题时向下滑动隐藏的行。我试图用1 jQuery语句来做这件事。我知道我可以为每个div标签创建一个id，并为每个单击的“标题行”设置一个单独的函数，但我真的不想这样做。

在下面的代码示例中，我只能获得第一行来执行slideToggle，但是当单击“标题行”时，我无法弄清楚如何让另一行滑动。

非常感谢任何帮助。

<!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

你想要完成的事情非常简单，有很多方法可以实现它。下面是一种简单的方法，它依赖于您在上面的顺序中的标题和内容，但首先不要创建重复的ID。由于多种原因，您希望所有ID都是唯一的。

您要做的是更改它，以便标题有一个类，内容有另一个类。 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函数问题/如何

2 个答案: