如何向下滑动三个不同的类

Question

很明显，我的脚本适用于一个班级。但它并不适用于几个具有相同意图的课程。我尝试将div（#panel）放入类（.panel），因为我正在使用几个类。但它仍然无法正常工作。你们有没有解决方案吗？这是我的jsfiddle，所以你能看出问题所在。 http://jsfiddle.net/2FPZE/1/

这是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>

这是我的剧本

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

我的css

.panel {
    display:none;
}

Answer 1

您必须将.panel相对于点击的.more-link定位。

在点击事件中，this == .more-link。

所以你可以这样做：

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

小提琴：http://jsfiddle.net/2FPZE/5/

---

<强> .next()

<强> .end()

注意

此代码适用于您当前的DOM。但是，如果您在链接和文本之间插入内容，则需要更改代码。

Answer 2

你是如何在JSFiddle上测试它的？第一关，你甚至没有设置JQuery Framwork

请参阅，未选择任何内容，那么您希望如何解雇此事件？

此代码适用于两个链接

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

请记住，不要在JSFiddle中包含$(document).ready(function () {});，不需要包含