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

时间:2014-01-06 18:11:08

标签: jquery html css

很明显,我的脚本适用于一个班级。但它并不适用于几个具有相同意图的课程。我尝试将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;
}

2 个答案:

答案 0 :(得分:5)

您必须将.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。但是,如果您在链接和文本之间插入内容,则需要更改代码。

答案 1 :(得分:0)

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

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

enter image description here

此代码适用于两个链接

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

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