Question

我需要在以下jquery代码中进行小修改。（DEMO is here）

如果你在演示中注意到，Heading One正如我想要的那样完美地向上/向下滑动，但是标题二和三不是。不同之处只是我添加了另一个div（“Heading Two”，“Heading Three”）标签。我知道，需要用这行$（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');
    })
});

请指南

Answer 1

虽然不完美，但它可以为您提供所需的功能：

$(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

Answer 2

你的代码中的问题是你在两个和三个标题上使用父div，这适用于例子：

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

但不是您的代码

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

jsfiddle

Answer 3

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

：

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

据我所知，它的工作正常：http://jsfiddle.net/damyanpetev/U3zFR/5/

围绕<h3>标签</h3>的Jquery slideToggle问题

3 个答案: