我找到了一些非常有用的答案来帮助我使用java来扩展和折叠内容,但现在我无法弄清楚如何让它一次只扩展一个...所以当一个div扩展时,如果单击以展开另一个,它会折叠第一个。有任何想法吗?这是小提琴和代码。请帮忙!
http://jsfiddle.net/eK8X5/248/
HTML:
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
CSS:
.container .content {
display: none;
padding : 5px;
}
脚本:
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
答案 0 :(得分:0)
尝试
var $contents = $(".content")
var $headers = $(".header").click(function () {
var $header = $(this);
//getting the next element
var $content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.stop(true, true).slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
$headers.not($header).text("Expand");
$contents.not($content).stop(true, true).slideUp();
});
演示:Fiddle
答案 1 :(得分:0)
看看http://getbootstrap.com/2.3.2/javascript.html#collapse你会看到手风琴菜单的一个很好的例子。您可以通过使用Bootstrap和Bootstrap javascript文件来实现它。或者你可以深入研究他们的代码,看看他们是如何做到的。我建议弄清楚他们是如何做的,这样你就可以根据需要进行调整。仅仅因为它的Bootstrap并不意味着它的最佳方式。