javascript - 在新展开的div中展开隐藏内容

Question

我在 FAQ 类型设置中使用了很多内容。当用户点击任意数量的链接时，它会展开该部分并显示他们自己也可以展开的元素列表。我想要完成的是在切换 FAQ div 时展开其中一些列表项。

因此，用户单击展开元素列表的链接，焦点将设置为与该链接一起出现的确切元素内容。基本上，就像超链接 anchor 一样，只有所有这些内容都在一个页面上，并且有一个 slideToggle 后面跟着另一个幻灯片切换。

我把我想在这里完成的事情弄得一团糟: JSFiddle

<h2>If you want to know more information about this exact item <a href="#" id="clicke">click  here!</a>
</h2>

<div id="myHiddenContent" style="display:none">
<li id="info-block-one">
<dl>
    <dt>
        <a aria-haspopup="true" aria-expanded="true" href="#contentBlock" id="infoLink">
            <strong>Info block one</strong></a>
    </dt>
    <dd tabindex="-1" aria-hidden="false" role="region" style="display: block;">
        <p class="answer" id="contentBlock" style="display:none">Info Block Answer</p>       
    </dd>
</dl>
</li>

$( "#infoLink" ).click(function() {
$( "#contentBlock" ).slideToggle( "slow", function() {
});
 });
$( "#clicke" ).click(function() {
$( "#myHiddenContent" ).slideToggle( "slow", function() {
});
});

Answer 1

我相信你想要像下面这样的东西:

$( "#infoLink" ).click(function() {
    $(this).parent().next("dd").children("#contentBlock").slideToggle( "slow", function() {});
});
$( "#clicke" ).click(function() {
    $(this).parent().next("#myHiddenContent").slideToggle( "slow", function() {});
});