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

Question

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

因此，用户单击扩展项目列表的链接，焦点将设置为与该链接相关的确切项目内容。基本上，就像超链接锚点一样，只有所有这些内容都在一个页面上，并且有一个 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() {});
});