Javascript 如何仅允许一个容器在单击时展开？

我正在尝试使用扩展/折叠容器，除了一个小细节之外，其他一切都正常。我想限制最终用户一次打开多个容器。理想情况下，我希望一次只扩展一个容器

您需要一些对象来保存应用程序状态。您可以创建一个变量，例如

var expanded = false;

然后将上面的代码包装成这样的语句，以便在单击展开项时

if (!expanded) {
    // proceed as normally
    expanded = true;
} else {
    // stop action from happening
    return;
}

编辑：

当您单击减号时，您还需要将expanded back更改为false

编辑： 我对你的链接做了一些修改

---

您可以隐藏其他大型长方体元素，如

$（窗口）.load（函数（）{
如果（$（“.navbox”）.length>0）{
var html=document.getElementsByTagName（“html”）.item（0）；
var hasCSS3=（html.className.indexOf（“无cstransforms”）=-1）
$（“.no.cstransforms.larger”）.toggleClass（“未显示”）；
$（“.large”）.children（）.toggleClass（“未显示”）；
//展开导航框
$（“.nav.plus”）。单击（函数（）{
var smallerBox=$（this）.closest（“.navBox”）；
var largerBox=smallerBox.next（）；
var$ol=$（this）.closest（'.navBox'）.find（'.navBox.larger'）.not（largerBox）；
如果（hasCSS3）{
//smallerBox.兄弟姐妹（“较小”）。toggleClass（“合同”）；
//smallerBox.兄弟姐妹（“.smaller”）.toggleClass（“隐藏”）；
//smallerBox.children（）.toggleClass（“隐藏”）；
//smallerBox.toggleClass（“扩展”）.delay（600）.toggleClass（“隐藏”）；
大盒子。切换类（“顶部”）。延迟（600）。切换类（“隐藏”）；
$ol.removeClass（'top'）.addClass（'hidden'）；
}否则{
//smallerBox.toggleClass（“未显示”）；
//smallerBox.兄弟姐妹（“.smaller”）.toggleClass（“未显示”）；
大盒子。切换类（“未显示”）；
$ol.addClass（'undisplayed'）
}
largerBox.children（）.toggleClass（“未显示”）；
$ol.children（）.addClass（“未显示”）；
返回false；
});
//合同导航箱
$（“.nav.减号”）。单击（函数（）{
var largerBox=$（this.parents（“.navBox”）；
var smallerBox=largerBox.prev（）；
largerBox.children（）.toggleClass（“未显示”）；
如果（hasCSS3）{
largerBox.toggleClass（“隐藏”）；
largerBox.toggleClass（“顶部”）
//smallerBox.toggleClass（“隐藏”）；
//smallerBox.toggleClass（“扩展”）；
//smallerBox.children（）.toggleClass（“隐藏”）；
//smallerBox.兄弟姐妹（“.smaller”）.toggleClass（“隐藏”）；
//smallerBox.兄弟姐妹（“较小”）。toggleClass（“合同”）；
}否则{
大盒子。切换类（“未显示”）；
//smallerBox.toggleClass（“未显示”）；
//smallerBox.兄弟姐妹（“.smaller”）.toggleClass（“未显示”）；
}
返回false；
});
}
setOrgChartDimensions（）；
})（jQuery）
.navbox.undisplayed{
显示：无；
}
.导航框，导航框{
位置：绝对位置；
浮动：左；
颜色：#fff；
}
.导航框。导航框。更小{
宽度：160px；
高度：160px；
z指数：2；
}
.navBox.navBox.small.top{
z指数：4；
}
.导航框。导航框。更大{
宽度：继承；
z指数：1；
}
.navBox.navBox.hidden{
不透明度：0.0；
}
.navBox.navBox.Large.Top{
z指数：3；
}
.navBox.navBox.Large.图标{
浮动：左；
}
.导航框{
颜色：#fff；
}
.navBox.navBox.Large.标题{
位置：相对位置；
顶部：10px；
}
.navBox.navBox.Large.body{
边缘顶部：20px；
}
.导航框。导航框。更大。主体a{
颜色：#fff；
文字装饰：下划线；
}
.navBox.navBox.nav{
位置：绝对位置；
宽度：35px；
高度：30px；
垫面：5px；
}
.navBox.navBox.NavA{
颜色：#fff；
}
.navBox.navBox.nav.plus{
顶部：110px；
左：110像素；
}
.导航框.导航框.导航减号{
位置：相对位置；
浮动：对；
}
.导航框。框1{
背景色：#185394；
变换原点：左上角；
}
.NavBox.box1.更小：悬停{
背景色：#214872；
}
.导航框。框2{
背景色：#c94747；
变换原点：右上角；
}
.NavBox.box2.更小：悬停{
背景色：#b24444；
}
.导航框。框2.更小{
左边距：180像素；
}

-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-一些文本-

-一些文本-一些文本-一些文本-一些文本-