Javascript 手风琴条件开闭功能

我为我的移动视图实现了一个简单的手风琴菜单，菜单标题是可点击的图像

我想一次只打开一个类别，基本上，点击图片2应该会打开图片2手风琴内容主体，但关闭所有其他手风琴内容主体。现在，我需要再次单击每张图片以关闭其主体

希望这是有道理的

这是我迄今为止的代码：

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

手风琴{ 背景色：#fff； 颜色：#444； 光标：指针； 宽度：103%； 边界：无； 文本对齐：左对齐； 大纲：无； 字体大小：15px； 过渡：0.4s； 保证金：-5px； } .bg{ 宽度：100%； } .主动， .手风琴：悬停{ 背景色：#fff； } .小组{ 填充：0 0px； 显示：无； 宽度：100%； 背景色：白色； 溢出：隐藏； }

内容正文文本

内容正文文本

内容正文文本

内容正文文本

内容正文文本

内容正文文本

这是我能想到的一个小脚本

我添加了下一个css类来控制手风琴的状态，并避免使用js执行css：

.accordion.active+div {
  display: block
}

脚本验证了两件事

如果有一个打开的al就绪

如果单击的与打开的相同

我希望这能帮上忙，如果你还需要什么，我会在你身边的

var acc=document.getElementsByClassName（“accordion”）；
var i；
var open=null；
对于（i=0；i

手风琴{ 背景色：#fff； 颜色：#444； 光标：指针； 宽度：103%； 边界：无； 文本对齐：左对齐； 大纲：无； 字体大小：15px； 过渡：0.4s； 保证金：-5px； } .bg{ 宽度：100%； } .主动， .手风琴：悬停{ 背景色：#fff； } .小组{ 填充：0 0px； 显示：无； 宽度：100%； 背景色：白色； 溢出：隐藏； } .手风琴.主动+分频{ 显示：块 }

内容正文文本

内容正文文本

内容正文文本

内容正文文本

内容正文文本

内容正文文本

如果您使用的是

jQuery

库，请尝试使用

注意：我已经从代码中删除了图像，只放置了数字作为视觉效果

堆栈片段

$（“.accordion”）。在（“单击”，函数（）{
$（“.panel”）.removeClass（“show”）；
$（this）.addClass（“活动”）.sides（“手风琴”）.removeClass（“活动”）
$（this）.next（.panel”）.addClass（“show”）；
});
手风琴{
背景色：#fff；
颜色：#444；
光标：指针；
宽度：103%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
保证金：-5px；
}
.bg{
宽度：100%；
}
.主动，
.手风琴：悬停{
背景色：#000；
颜色：#fff；
}
.panel.show{
显示：块
}
.小组{
填充：0 0px；
显示：无；
宽度：100%；
背景色：白色；
溢出：隐藏；
}

1.
内容正文文本

2.
内容正文文本

3.
内容正文文本

4.
内容正文文本

5.
内容正文文本

6.
内容正文文本

您考虑过使用JQuery UI Accordion吗？你在使用jquery库吗？@FatTwin很乐意帮我解决一个问题：如果我点击img2，它会关闭img1的主体内容，但基本上会向下滚动。我想点击img 2，但留在img 2。这有意义吗？@FatTwin不是真正的jajaja，你可以添加你的代码吗。或者你可以再问我一个问题，给我贴上标签。问题是，这个内容实际上太小了。我将滚动到happenI，我只想问另一个问题，但代码是一样的（只是一个很长的img/text，上面写着“内容正文”）@FatTwin okok，pliss标记我，这样我就可以帮上忙了。我真的不知道是什么问题，但我也不能真正想象这种行为。