Javascript手风琴导航栏/下拉菜单打开和关闭

我现在正在做一个水平的手风琴下拉导航栏，我正试图得到它，这样一次只能扩展一个部分。所以当A小节展开，点击B小节，A小节关闭，B小节展开。现在，它们可以同时扩展

谢谢你的帮助

（我也意识到这并不是一个真正的下拉列表，但我也不确定sideslide会不会不那么令人困惑）

$（函数（）{
$（“.item”）。在（“单击”，函数（）{
$（本）
.next（）.toggleClass（“活动”）；
});
$（“#body”）.css（“最小高度”、“100%”）；
});
$（文档）.ready（函数（）{
变量$overlay=$（''）；
var$href=$（'this'）.attr（'href'）；
var$popup=$（'.pop window'）；
$（'x'）.appendTo（$popup）；
$popup.hide（）；
$（'a'）。单击（函数（e）{
e、 预防默认值（）；
$overlay.fadeIn（800）.appendTo（'body'）；
$popup.delay（800.slideDown（）；
});
$overlay.单击（函数（）{
$overlay.delay（800.fadeOut（）；
$popup.slideUp（）；
});
$（'.close'）。单击（函数（）{
$popup.slideUp（）；
$overlay.delay（800.fadeOut（）；
});
});
*{
框大小：边框框；
}
身体{
背景：#eaeaea；
颜色：#333333；
利润率：0.100px；
底部：1rem；
}
身体背景{
背景图片：url（“lab3.jpg”）；
背景重复：无重复；
背景附件：固定；
背景位置：中心；
-webkit背景尺寸：100%自动；
-moz背景尺寸：100%自动；
背景尺寸：100%自动；
颜色：#333333；
利润率：0.100px；
底部：1rem；
}
html{
溢出x：隐藏；
宽度：100%；
最小高度：100%；
位置：相对位置；
保证金：0；
}
.标题{
高度：100px；
宽度：110%；
背景色：#3a1f51；
颜色：白色；
显示：块；
利润率：-10px；
顶部：-10px；
填充：-10px；
边缘底部：-20px；
位置：相对位置；
-webkit盒阴影：0.5pxRGBA（0,0,0,0.15）；
-moz盒阴影：0.5pxrgba（0,0,0,0.15）；
长方体阴影：0.5pxRGBA（0,0,0,0.15）；
z指数：2；
}
h1{
保证金：0；
边缘底部：10px；
左边距：40px；
填充：0；
位置：绝对位置；
底部：0；
颜色：#d1d1；
字体系列：Roboto，无衬线；
字母间距：5px；
字号:18 ;；
}
.幻灯片盒{
顶部：10px；
左：-10px；
浮动：左；
显示：块；
背景色：#d2d2d2；
宽度：110%；
高度：40px；
位置：相对位置；
z指数：1；
保证金：0；
填充：0px；
位置：相对位置；
-webkit盒阴影：0.5pxRGBA（0,0,0,0.15）；
-moz盒阴影：0.5pxrgba（0,0,0,0.15）；
长方体阴影：0.5pxRGBA（0,0,0,0.15）；
}
部分{
宽度：150%；
保证金：0px自动；
左边距：-15px；
字体系列：Raleway，无衬线；
}
.项目{
字体大小：calc（8px+.55vw）；
宽度：9%；
高度：40px；
浮动：左；
右边框：4px实心#D2D2D2D2；
字体：单空格；
填充：10px；
光标：指针；
背景色：#3a1f51；
变换：倾斜（-20度）；
-webkit变换：倾斜（-20度）；
-moz变换：倾斜（-20度）；
文本对齐：居中；
-webkit盒阴影：0.5pxRGBA（0,0,0,0.15）；
-moz盒阴影：0.5pxrgba（0,0,0,0.15）；
长方体阴影：0.5pxRGBA（0,0,0,0.15）；
字体系列：Raleway，无衬线；
颜色：#eaeaea；
}
.info{
字体大小：calc（8px+.55vw）；
浮动：左；
宽度：0%；
高度：40px；
可见性：隐藏；
字体：单空格；
背景色：#d2d2d2；
变换：倾斜（-20度）；
-webkit变换：倾斜（-20度）；
-moz变换：倾斜（-20度）；
文本对齐：居中；
-webkit盒阴影：0.5pxRGBA（0,0,0,0.15）；
-moz盒阴影：0.5pxrgba（0,0,0,0.15）；
长方体阴影：0.5pxRGBA（0,0,0,0.15）；
过渡：宽度减小.3s，可见性减小.3s；
空白：nowrap；
溢出：隐藏；
填充：10px0；
字体系列：Raleway，无衬线；
}
.info.active{
能见度：可见；
宽度：12%；
字体系列：Raleway，无衬线；
}
尼坦先生{
字体大小：calc（8px+.55vw）；
宽度：9%；
高度：40px；
浮动：左；
右边框：4px实心#D2D2D2D2；
字体：单空格；
填充：10px；
光标：指针；
背景色：#3a1f51；
变换：倾斜（-20度）；
-webkit变换：倾斜（-20度）；
-moz变换：倾斜（-20度）；
文本对齐：居中；
-webkit盒阴影：0.5pxRGBA（0,0,0,0.15）；
-moz盒阴影：0.5pxrgba（0,0,0,0.15）；
长方体阴影：0.5pxRGBA（0,0,0,0.15）；
字体系列：Raleway，无衬线；
颜色：#eaeaea；
}
.弹出窗口{
宽度：60%；
z指数：999；
背景：#fff；
保证金：0自动；
边框：2个实心#cdcdcd；
填充：20px；
位置：绝对位置；
最高：30%；
左：20%；
字体大小：1.4vw；
字体系列：Raleway，无衬线；
背景色：rgba（230230,0.85）；
填充：1%；
边界半径：25px；
垫面：0.5%；
垫底：.1%；
}
.覆盖{
背景：rgba（0,0,0,0.7）；
身高：100%；
宽度：100%；
顶部：0px；
左：0px；
位置：绝对位置；
}
.结束{
位置：绝对位置；
右：15px；
顶部：10px；
颜色：#000；
光标：指针；
}
.homebutton{
颜色：#333；
字体大小：1.4vw；
字体系列：Raleway，无衬线；
}
钮扣{
边框：.2vw实心rgba（134134134.5）；
填充：10px 20px；
背景：rgba（134134134,0）；
显示：块；
保证金：自动；
位置：固定；
最高：53%；
左：40%；
宽度：钙（20%）；
光标：指针；
}
按钮a{
颜色：#fff；
文字装饰：无；
文本转换：大写；
过渡：0.5s全部；
}
按钮：悬停{
背景：rgba（134134134,0.5）；
过渡：0.5s全部；
}

标题
标题
标题
标题›
|   
标题›
|   
正文标题
正文

所以您只需要
$（'.info'）.removeClass（'active'）操作，但要继续切换工作，也不应删除
当前信息
活动
类：


$（函数（）{
$(".