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

我正在尝试实现纸卡功能

一切似乎都很好，但我不能限制只有一个容器在更多单击时展开。我可以一次打开多个容器，这不是我想要的。我希望活动容器在尝试打开另一个容器时自动关闭。这是我的密码： HMTL：

功能${ $window.loadfunction{ 如果$.navbox.length>0 { var html=document.getElementsByTagNamehtml.item0； var hasCSS3=html.className.indexOfno-cstransforms==-1 $.no cstransforms.Large.toggleClassundisplayed； $.Large.children.toggleClassundisplayed； //展开导航框 $.nav.plus.clickfunction{ $.openedBox.addClassundisplayed.removeClassopenedBox； var smallerBox=$this.parents.navBox； var largerBox=smallerBox.next； 如果有CSS3 { //smallerBox.sibles.smaller.toggleClasscontracted； //smallerBox.sibles.smaller.toggleClasshidden； //smallerBox.children.toggleClasshidden； //smallerBox.toggleClassexpanded.delay600.toggleClasshidden； largerBox.ToggleClassTop.delay600.toggleClasshidden； } 其他的 { //smallerBox.toggleClassundisplayed； //smallerBox.sibles.smaller.toggleClassundisplayed； largerBox.toggleClassundisplayed； } largerBox.children.toggleClassundisplayed； largerBox.addClassopenedBox； 返回false； }; //合同导航箱 $.nav.减号.clickfunction{ var largerBox=$this.parents.navBox； $.openedBox.addClassundisplayed.removeClassopenedBox； var smallerBox=largerBox.prev； largerBox.children.toggleClassundisplayed； 如果有CSS3 { largerBox.toggleClasshidden； largerBox.ToggleClassTop //smallerBox.toggleClasshidden； //smallerBox.toggleClassexpanded； //smallerBox.children.toggleClasshidden； //smallerBox.sibles.smaller.toggleClasshidden； //smallerBox.sibles.smaller.toggleClasscontracted； } 其他的 { largerBox.toggleClassundisplayed； //smallerBox.toggleClassundisplayed； //smallerBox.sibles.smaller.toggleClassundisplayed； } 返回false； }; } 设置图表尺寸； }; }jQuery； .导航箱{ 宽度：522px；} .导航框。未展开 {显示：无；} .导航框，导航框 {位置：绝对位置； 浮动：左； 明确：无； 填充：0 15px； 颜色：fff； 字体系列：Helvetica； 框大小：边框框；} .导航框。导航框。更小{ 宽度：160px； 高度：160px； z指数：2； 文本对齐：居中； 游标：指针；} .navBox.navBox.minger.top{z-index:4；} .导航框。导航框。更大 {高度：自动； 不透明度：0.95； 溢出：自动； 宽度：继承； z指数：1； 过滤器：alphaopacity=95；/*适用于IE8及更早版本*/} .navBox.navBox.hidden {不透明度：0.0；} .navBox.navBox.Large.Top {z-索引：3；} .navBox.navBox.Large.图标{ 浮动：左； 右边距：10px；} .navBox.navBox.title {字号：600； 字号：17px； 行高：20px；} .navBox.navBox.minger.title {页边距顶端：8px；} .导航框 {color:fff；} .navBox.navBox.Large.标题 {位置：相对位置； 顶部：10px；} .navBox.navBox.Large.body {页边距顶端：20px；} .导航框。导航框。更大。主体a {颜色：fff； 文本装饰：下划线；} .navBox.navBox.nav {位置：绝对位置； 宽度：35px； 高度：30px； 垫面：5px； 文本对齐：居中； 光标：指针； 框大小：边框框； -webkit框大小：边框框； -moz框大小：边框框；} .navBox.navBox.NavA {颜色：fff； 文本装饰：无；} .navBox.navBox.nav.plus {top:110px； 左：110px；} .导航框.导航框.导航减号 {位置：相对位置； float:right；} .导航框。框1 {背景色：185394； 变换原点：左上；} .NavBox.box1.更小：悬停 {背景色：214872；} .导航框。框2 {背景色：c94747； 变换原点：右上；} .navBoxes.box2.更小：悬停{背景色：b24444；} .navBoxes.box2.较小的{左边距：180px；} -一些文本-一些文本-一些文本-一些文本-

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

---

我在这里的代码中所做的是当你想要打开一个盒子的时候 我从任何拥有openedBox的人那里删除了该类，该类可能为null。 我把它放在我想打开的盒子上。 当我关上盒子时，我也会把它取下来。 查找以下行：

    $(".nav.plus").click(function(){
        var smallerBox = $(this).parents(".navBox");

        largerBox.children().toggleClass("undisplayed");
        return false;

替换为：

        $(".nav.plus").click(function(){
            $(".openedBox").addClass("undisplayed").removeClass("openedBox");
            var smallerBox = $(this).parents(".navBox");

        largerBox.children().toggleClass("undisplayed");
        largerBox.addClass("openedBox");
        return false;

    $(".nav.minus").click(function(){
        var largerBox = $(this).parents(".navBox");
        $(".openedBox").addClass("undisplayed").removeClass("openedBox");

查找以下行：

    $(".nav.plus").click(function(){
        var smallerBox = $(this).parents(".navBox");

        largerBox.children().toggleClass("undisplayed");
        return false;

替换为：

        $(".nav.plus").click(function(){
            $(".openedBox").addClass("undisplayed").removeClass("openedBox");
            var smallerBox = $(this).parents(".navBox");

        largerBox.children().toggleClass("undisplayed");
        largerBox.addClass("openedBox");
        return false;

    $(".nav.minus").click(function(){
        var largerBox = $(this).parents(".navBox");
        $(".openedBox").addClass("undisplayed").removeClass("openedBox");

查找：

替换为：

        $(".nav.plus").click(function(){
            $(".openedBox").addClass("undisplayed").removeClass("openedBox");
            var smallerBox = $(this).parents(".navBox");

        largerBox.children().toggleClass("undisplayed");
        largerBox.addClass("openedBox");
        return false;

    $(".nav.minus").click(function(){
        var largerBox = $(this).parents(".navBox");
        $(".openedBox").addClass("undisplayed").removeClass("openedBox");

---

您需要设置一个表示扩展div的类。假设您在每次扩展时都设置openedBox类。现在，您可以在设置该类之前使用jQuery来搜索具有该类$openedBox.removeClassopenedBox.hide的所有元素；它们不会显示，然后您将类添加到当前框中，您不应该使用这么多类

---

对于相同的属性。您应该选择大一点的盒子，小一点的盒子，而不是大一点的盒子，大二点的盒子，小一点的盒子，小二点的盒子。这不是正确的方式。谢谢您的回复。您建议如何设置openedBox类。你能举个例子吗。提前感谢您的帮助。您好，您的问题是您有隐藏类和未显示类，并且您以混合方式使用它们。我只处理未展开的部分。我的解决方案对您的问题是有效的，您唯一应该检查的是toggleClass，它可以防止它在1 timeSaar之后出现，谢谢您提供的示例。好像我对代码有问题。当我试图在第一个盒子打开时展开第二个盒子时，它会替换展开的容器。但我无法重新打开第一个。这是否意味着我只能打开集装箱一次？请提供建议并感谢您为帮助meHi Irina所做的努力，现在请参阅我的代码添加。我改了一个bitI刚刚用你提供的代码更新了我的代码片段，它仍然限制我多次打开同一个容器嗨，如果你添加一个工作的JSFIDLE，我将能够帮助你