javascript - 在 Div 中显示可折叠的内容

Question

我在网上搜索了我的问题的解决方案，我已经非常接近我想要的 Accordion JQuery 设计了，但是.. 我对 JQuery 模板有一些扩展，但我不知道如何实现，所以这里是:

当你进入网页时，我的 Div 是这样的:

当您将鼠标悬停在图片或标题/文本上时，文本将带有下划线和斜体，以便用户通过点击了解该功能。 如果访问者点击图片/文字，我希望看到的是:

这是我的特定 Div 的 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 的 fiddle 确实有效，但我建议不要使用它，因为它只适用于一个元素——您需要为您创建的每个新部分添加更多代码。

但是，此解决方案会在单击任何 h1 元素时查找它，然后找到离它最近的下一个 .hidden 类元素，从而允许您添加尽可能多的不同区域。

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

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