1

我需要在下面的 jquery 代码中进行小的修改。（演示在这里）

如果您在演示中注意到，标题 1 可以按照我的意愿完美地向上/向下滑动，但标题 2 和 3 不是。不同之处只是我在 ("Heading Two" , "Heading Three" ) 标签周围添加了另一个 div。我知道，需要对这一行做一些事情 $(this).next("p").slideToggle("fast"); 但我不知道该怎么做，因为我是 Jquery 的初学者。

以下是我的代码

$(document).ready(function(){
    $("p").hide();

    $("h3").click(function(){
        $(this).next("p").slideToggle("fast")
        $(this).toggleClass("active");
    });
    $('.mylink').click(function(){
        $(this).parent('p').prev().trigger('click');
    })
});

请指导

4

3 回答 3

3

虽然并不完美，但这将为您提供所需的功能： 

$(document).ready(function(){
    $("p").hide();

    $("h3").click(function(){
        $(this).closest('.accordion').find("p").slideToggle("fast");
        $(this).toggleClass("active");
    });
    $('.mylink').click(function(){
        $(this)
          .parent()
          .slideToggle('fast')
          .closest('.accordion')
          .find('h3')
          .toggleClass('active');
    })
});

主要变化是closest()用于定位父元素并将其用作元素的.accordion参考点。 find()p

编辑：由于某种原因，codepen 很无聊，这是一个jsfiddle

于 2013-04-10T18:20:13.650 回答
0

您的代码中的问题是您在两个和三个标题上使用了父 div，例如：

<h3 class="some_class">Heading One</h3>

但不是你的代码

 <div class="some_class"><h3>Heading One</h3></div>

jsfiddle

于 2013-04-10T18:03:31.077 回答
0

好吧，如果你需要保留结构， .next() 必须去。我想不出一个不那么混乱的方法来做到这一点，但结合它的父标签并寻找兄弟

：

$(this).parent().addBack().siblings("p").slideToggle("fast")

据我所知，它工作得很好：http: //jsfiddle.net/damyanpetev/U3zFR/5/

于 2013-04-10T18:19:33.867 回答