我在网上搜索了我的问题的解决方案,并且我使用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/
感谢任何提示/提示!
答案 0 :(得分:1)
这是一个JSFiddle来向您展示正在发生的事情。
jQuery的:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
够简单! Adaam在上面的帖子中的小提琴确实有效,但我建议不要使用它,因为它只适用于一个项目 - 你需要为你创建的每个新部分添加更多代码。
但是,此解决方案在单击时会查找任何h1
项,然后找到最接近它的下一个.hidden
类项,允许您根据需要添加任意数量的不同区域。
例如,使用上面相同的代码,您可以将所有内容扩展为this,而不需要额外的jQuery脚本。
要将其合并到您的项目中,您只需确保将.hidden
等效项嵌套在包含该部分其余部分的容器内,然后更改h1
和.hidden
适合你的正确的类名。确保它们是类名,因为ID不起作用。