Javascript 当我们打开一个手风琴时，另一个应该合上

当另一个手风琴打开时，我必须关闭手风琴。我一次只能打开一个手风琴。 目前，手风琴允许您一次打开多个面板。如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。我必须只显示一个。你能帮我吗

$（函数（）{
$（“.expand”）。在（“单击”，函数（）上）{
$（this.next（）.slideToggle（200）；
$expand=$（this.find（“>：第一个子项”）；
如果（$expand.text（）==“+”）{
$expand.text（“-”）；
}否则{
$expand.text（“+”）；
}
});
});
集成列表{
字体系列：“开放式Sans”，无衬线；
宽度：100%；
保证金：0自动；
显示：表格；
}
#集成列表{
填充：0；
利润率：20px0；
颜色：#555；
}
#集成列表ul>li{
列表样式：无；
/*边框顶部：1px实心#ddd*/
显示：块；
填充：15px；
溢出：隐藏；
}
#集成列表ul>li>a:悬停
{
文字装饰：无；
}
.扩大{
显示：块；
文字装饰：无；
颜色：#555；
光标：指针；
}
.展开h2{
字号：28px；
}
#苏普{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：80%；
}
.细节{
利润率：0 34px；
显示：无；
线高：22px；
/*高度：150像素*/
}
.详图h2{
字号：18px；
颜色：#000；
}
.右箭头{
/*边缘顶部：12px*/
利润率：0.20px；
宽度：10px；
身高：100%；
浮动：左；
字体大小：粗体；
字体大小：20px；
}
.图标{
高度：75px；
宽度：75px；
浮动：左；
边际：0 15px 0 0；
}

+
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。箭叶相思。Integer eu vehicula orci，semper tortor级别。前庭前庭。这是尤伊斯穆德·乌尔纳（euismod urna）的一个例子，他是一个门神，一个门神。生命之树，生命之树，生命之树。不可否认的是，我们的生命是有限的。无便利。



+
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。箭叶相思。Integer eu vehicula orci，semper tortor级别。前庭前庭。这是尤伊斯穆德·乌尔纳（euismod urna）的一个例子，他是一个门神，一个门神。生命之树，生命之树，生命之树。不可否认的是，我们的生命是有限的。无便利。



+
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。箭叶相思。Integer eu vehicula orci，semper tortor级别。前庭前庭。这是尤伊斯穆德·乌尔纳（euismod urna）的一个例子，他是一个门神，一个门神。生命之树，生命之树，生命之树。不可否认的是，我们的生命是有限的。无便利。

只需先隐藏所有

.details

并将所有

的文本设置为“+”

编辑：

正如评论所暗示的，为了获得更好的视觉效果，我切换到slideUp


$（函数（）{
$（“.expand”）。在（“单击”，函数（）上）{
if（$（this）.find（“.right arrow”）.text（）=“-”）{
返回；
}
$（“.detail”）.slideUp（）；
$（“.right arrow”）.text（“+”）；
$（this.next（）.slideToggle（200）；
$expand=$（this.find（“>：第一个子项”）；
如果（$expand.text（）==“+”）{
$expand.text（“-”）；
}否则{
$expand.text（“+”）；
}
});
});
集成列表{
字体系列：“开放式Sans”，无衬线；
宽度：100%；
保证金：0自动；
显示：表格；
}
#集成列表{
填充：0；
利润率：20px0；
颜色：#555；
}
#集成列表ul>li{
列表样式：无；
/*边框顶部：1px实心#ddd*/
显示：块；
填充：15px；
溢出：隐藏；
}
#集成列表ul>li>a:悬停
{
文字装饰：无；
}
.扩大{
显示：块；
文字装饰：无；
颜色：#555；
光标：指针；
}
.展开h2{
字号：28px；
}
#苏普{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：80%；
}
.细节{
利润率：0 34px；
显示：无；
线高：22px；
/*高度：150像素*/
}
.详图h2{
字号：18px；
颜色：#000；
}
.右箭头{
/*边缘顶部：12px*/
利润率：0.20px；
宽度：10px；
身高：100%；
浮动：左；
字体大小：粗体；
字体大小：20px；
}
.图标{
高度：75px；
宽度：75px；
浮动：左；
边际：0 15px 0 0；
}



+
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。箭叶相思。Integer eu vehicula orci，semper tortor级别。前庭前庭。阿利夸姆·卢克图斯·尤伊斯莫·乌尔纳（Aliquam luctus euismod urna），tincidunt lect生命
$(function() {
  $(".expand").on( "click", function() {
    $(".detail").hide();
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $(this).next().slideToggle(200);
      $(".expand").find(">:first-child").text("+");
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});