我花了大部分时间尝试使用多个建议的解决方案解决这个问题,但没有一个能够正常工作或完全正是我所追求的。
我只是简单地使用一种方法来隐藏页面加载时的文本内容,并在用户点击相关链接时使其可见,再次单击相同的链接或单击单独的链接时再次隐藏。
内容分为相关的div:
<div class="about">
This project is about X, Y & Z
</div>
<div class="contact">
Please contact me at@at.com
</div>
所有内容都会加载到网站上的单个中央内容容器中。
谢谢。
答案 0 :(得分:0)
使用jquery很容易实现。添加一个类以显示哪些字段是可扩展/可折叠的:
<div class="about expandable">
This project is about X, Y & Z
</div>
<div class="contact expandable">
Please contact me at@at.com
</div>
在您的javascript文件中:
$('.expandable').click(function(e){
$(this).toggle();
}
答案 1 :(得分:0)
试试这个:
CSS
.toHide{
display:none;
}
HTML
<div class="about toHide">
This project is about X, Y & Z
</div>
<div class="contact toHide">
Please contact me at@at.com
</div>
jQuery
$('#about').click(function (e) { //in this case I assume you have a element with ID `about` that will trigger the div with that class to show up
$('.toHide').hide();
$('.' + this.id).show();
});
成分:
答案 2 :(得分:0)
我的解决方案:
<强> HTML:
<a href="" data-box="about">About</a>
<a href="" data-box="contact">Contact</a>
<div class="box about">
This project is about X, Y & Z
</div>
<div class="box contact">
Please contact me at@at.com
</div>
<强> jQuery的:
$(function(){
$('a').click(function(ev){
ev.preventDefault();
// hide everything
$('.box').not(
// except the corresponding box
$('.box.'+$(this).data('box')+':hidden').fadeIn()
).fadeOut();
});
});
<强>演示:
答案 3 :(得分:-1)
Jquery手风琴可以帮助你http://jqueryui.com/accordion/