[英]Expand and collapse div
The expand and collapse functionality is currently working fine but I'd like to modify the functionality so when I click on Expand 1
, and then click on Expand 2
, that Expand 1
should collapse automatically. 扩展和折叠功能当前可以正常工作,但是我想修改该功能,因此当我单击
Expand 1
,然后单击Expand 2
时, Expand 1
应该自动折叠。 This means that only one div
is allowed to be expanded at once while all the others should remain collapsed. 这意味着一次只允许一个
div
扩展,而其他所有div
都应保持折叠状态。
HTML: HTML:
<div class="container">
<div class="header"><span>Expand 1</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 class="header"><span>Expand 2</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>
CSS 的CSS
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
Jquery jQuery的
$(".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";
});
});
});
Example.. 例..
http://jsfiddle.net/eK8X5/8290/ http://jsfiddle.net/eK8X5/8290/
You can do, 你可以做,
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$(".content").not($content).slideUp().prev().text("Expand");
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
$(".content").not($content).slideUp().prev().text("Expand");
$(".content").not($content).slideUp().prev().text("Expand");
First you need to collapse other if any already expanded. 首先,您需要折叠其他(如果已展开)。 I updated jsfiddle and it is working now.
我更新了jsfiddle,它现在可以正常工作。 jsfiddle Try this:
jsfiddle尝试以下操作:
$(".header").click(function () {
CollapseAll(this);
$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";
});
});
});
function CollapseAll(obj){
$(".header").each(function(i, item){
var that = $(this);
if($(this).next().is(":visible") && this != obj){
$(this).next().slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
that.text(function () {
//change text based on condition
return that.next().is(":visible") ? "Collapse" : "Expand";
});
});
}
});
}
You can add these two lines in your JS code to achieve desired result. 您可以在您的JS代码中添加这两行以获得所需的结果。
$contents = $(".header").not(this).next();
$contents.filter(":visible").slideUp(500).prev().text("Expand");
So complete JS code 如此完整的JS代码
$(".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";
});
});
// Get all content panels and Hide them
$contents = $(".header").not(this).next();
$contents.filter(":visible").slideUp(500).prev().text("Expand");
});
The idea is to select all header
elements excluding this
clicked header and if they are visible hide them. 我们的想法是选择所有
header
元素排除this
点击标题,如果他们是可见的隐藏起来。
Hope this helps. 希望这可以帮助。
You have to select the content sections of headers that were not clicked and slide them up. 您必须选择未单击标题的内容部分并将其向上滑动。 Something like:
就像是:
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//toggle other content area slides
var notClicked = $('.header').not(this).next().slideUp(500);
$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";
});
});
});
You can add this to the end of your click code. 您可以将其添加到点击代码的末尾。 It collapses all of the siblings then performs your text check after the collapse.
它折叠所有兄弟姐妹,然后在折叠之后执行文本检查。
$header.siblings(".header").each(function(index,obj){
header = $(obj);
content = header.next();
content.slideUp(500, function(){
header.text(function () {
return content.is(":visible") ? "Collapse" : "Expand";
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.