Jquery 如何在三个不同的课程中下滑

很明显，我的脚本只适用于一个类。但是，对于几个有着相同意图的班级来说，这是行不通的。我尝试将from div（#panel）放入类（.panel），因为我使用了几个类。但它仍然不起作用。你们有解决这个问题的办法吗？这是我的JSFIDLE，因此您可以查看问题所在

这是html

    <div class="more-link"> more </div>
        <div class="panel">
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
              </div>

<div class="more-link"> more </div>
        <div class="panel">
              <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
              </div>

还有我的css

.panel {
    display:none;
}

---

您必须将

.panel

定位到与单击的

.more链接相对应的位置

在单击事件中，
this==.more链接

所以你可以这样做：

$(document).ready(function () {
    $(".more-link").click(function () {
        $(this).next(".panel").slideDown("slow")
        .end().remove();
    });
});

小提琴：




注
此代码适用于当前DOM。但是，如果在链接和文本之间插入了内容，则需要更改代码。
您必须将
.panel
作为相对于单击的
.more链接的目标

在单击事件中，
this==.more链接

所以你可以这样做：

$(document).ready(function () {
    $(".more-link").click(function () {
        $(this).next(".panel").slideDown("slow")
        .end().remove();
    });
});

小提琴：




注
此代码适用于当前DOM。但是如果在链接和文本之间插入了内容，则需要更改代码。
您是如何在JSFIDLE上测试它的？首先，你甚至没有设置JQuery框架

看，没有选择任何内容，那么您希望如何触发事件


此代码适用于两个链接

    $(".more-link").click(function () {
       $(".panel").slideDown("slow");
       $(".more-link").remove();
    });

记住，不要包括
$（document）.ready（函数（）{}）在JSFIDLE中不需要包含
您是如何在JSFIDLE上测试它的？首先，你甚至没有设置JQuery框架

看，没有选择任何内容，那么您希望如何触发事件


此代码适用于两个链接

    $(".more-link").click(function () {
       $(".panel").slideDown("slow");
       $(".more-link").remove();
    });

记住，不要包括
$（document）.ready（函数（）{}）在JSFIDLE中不需要包含
似乎在您的JSFIDLE中对我有效。不过别忘了将jQuery包含在您的fiddle示例中。是的，您错过了包含jQuery的过程。else关于代码的工作示例。@AlecMoore确实没有加载jQuery，但它不工作，因为他有两个链接，并且希望在单击时展开一个div，而不是两个都展开。嘿，对不起，我没有测试它，我忘了在我的JSFIDLE中加载jQuery。我通常在本地主机上试用。我放了JSFIDLE以防万一你们都明白了。非常感谢你。它现在对我有效：）在你的JSFIDLE中似乎对我有效。不过别忘了将jQuery包含在您的fiddle示例中。是的，您错过了包含jQuery的过程。else关于代码的工作示例。@AlecMoore确实没有加载jQuery，但它不工作，因为他有两个链接，并且希望在单击时展开一个div，而不是两个都展开。嘿，对不起，我没有测试它，我忘了在我的JSFIDLE中加载jQuery。我通常在本地主机上试用。我放了JSFIDLE以防万一你们都明白了。非常感谢你。它现在对我起作用了：）我忘了加载jquery框架，我通常在本地主机上试用。谢谢你提供的信息，我会记下来的。：）我忘了加载jquery框架，我通常在本地主机上尝试。谢谢你提供的信息，我会记下来的。：）