在Div中显示可折叠内容

Question

我已经在网络上搜索了我的问题的解决方案，我非常接近我想要的手风琴JQuery的设计，但是..。我对JQuery模板有一些扩展，但我不知道如何实现，因此如下所示：

当您输入网页时，我的部门就是这样的：

​

当您悬停在图片或标题/文本上时，文本将加下划线和斜体，以便用户知道带有剪裁的功能。如果访问者点击图片/文本，我希望看到的是：

​

​

这是我的HTML，用于特定的分区

<a href="#">
<div class="newsbox">
    <img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
    <br />
    <p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
    <div class="vertical_accordion_toggle">
        <p></p>
    </div>
</div>
</a>

代码： http://jsfiddle.net/VCDe2/1/

感谢任何提示/提示！

Answer 1

这里有一个JSFiddle，向您展示正在发生的事情。

jQuery：

$('h1').click(function(){ 
    $(this).next('.hidden').slideToggle();
});

够简单了！上面文章中的Adaam小提琴确实有效，但我建议不要使用它，因为它只适用于一个项目--您需要为创建的每一个新部分添加更多的代码。

但是，此解决方案将在单击任何h1项时查找它，然后查找与其最接近的下一个.hidden类项，允许您添加任意多个不同的区域。

例如，使用上面相同的代码，您可以在没有额外的这脚本的情况下，将所有内容扩展到像jQuery一样工作。

要将其不关联到您的项目中，您所要做的就是确保您的.hidden等效值与该部分的其余部分嵌套在容器中，并更改h1和.hidden以适合您的正确类名。确保它们是类名，因为ID不起作用。