在Div中显示可折叠内容

时间:2014-03-01 22:45:43

标签: javascript html css

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

这是我进入网页时Div的外观: enter image description here

当您将鼠标悬停在图片或标题/文字上方时,文字将加下划线和斜体,以便用户知道该特征是否已突然显示。 如果访问者点击图片/文字,我希望看到的是:

enter image description here

这是我特定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/

感谢任何提示/提示!

1 个答案:

答案 0 :(得分:1)

这是一个JSFiddle来向您展示正在发生的事情。

jQuery的:

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

够简单! Adaam在上面的帖子中的小提琴确实有效,但我建议不要使用它,因为它只适用于一个项目 - 你需要为你创建的每个新部分添加更多代码。

但是,此解决方案在单击时会查找任何h1项,然后找到最接近它的下一个.hidden类项,允许您根据需要添加任意数量的不同区域。

例如,使用上面相同的代码,您可以将所有内容扩展为this,而不需要额外的jQuery脚本。

要将其合并到您的项目中,您只需确保将.hidden等效项嵌套在包含该部分其余部分的容器内,然后更改h1.hidden适合你的正确的类名。确保它们是类名,因为ID不起作用。