Javascript 如何使用css弹出多个选项卡

我一直在努力解决以下代码

a{
文字装饰：无；
颜色：#333；
}
#流行音乐{
宽度：557px；
高度：400px；
背景：#333；
左：30%；
边缘顶部：80px；
z指数：999999；
盒影：0px 0px 10px#000；
-网络工具包盒阴影：0px 0px 10px#000；
-moz盒阴影：0px 0px 10px#000；
边界半径：5px；
-webkit边界半径：5px；
-o-边界半径：5px；
}
#pop2{
宽度：557px；
高度：400px；
背景：#333；
左：30%；
边缘顶部：80px；
z指数：999999；
盒影：0px 0px 10px#000；
-网络工具包盒阴影：0px 0px 10px#000；
-moz盒阴影：0px 0px 10px#000；
边界半径：5px；
-webkit边界半径：5px；
-o-边界半径：5px；
}
.内容{
宽度：100%；
背景：#fff；
颜色：#666；
宽度：500px；
高度：300px；
溢出y：滚动；
保证金：自动；
填充：10px；
文本对齐：对齐；
盒影：0px 0px 10px#333插图；
-webkit盒阴影：0px 0px 10px#333插图；
-moz盒阴影：0px 0px 10px#333插图；
}
#流行音乐：目标{
高度：30px；
宽度：250px；
溢出：隐藏；
位置：固定；
底部：0；
左：236px；
}
#pop2：目标{
高度：30px；
宽度：250px；
溢出：隐藏；
位置：固定；
底部：0；
左：236px；
}
标题
标准的Lorem Ipsum通道，从16世纪开始使用
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”
标题
标准的Lorem Ipsum通道，从16世纪开始使用
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”

给你，这是我做的东西

我使它易于扩展，所有你要做的就是复制另一个标签的HTML。如果这不是你想要的，我可以修改它

编辑：修正了代码，最小化的弹出窗口将最小化其他弹出窗口，然后将其最大化

函数展开/折叠（elem）{
var top_div=elem.parentNode.parentNode.parentNode；
if（top_div.classList.contains（“最大化”））{
elem.innerHTML=“▲；”；
top_div.classList.toggle（“最小化”，true）；
top_div.classList.toggle（“最大化”，false）；
}否则{
var popouts=document.getElementsByClassName（“pop_out”）；
对于（var i=0；i像这样


$（文档）.ready（函数（）{
$（'.show popup'）。在（'单击'，函数（）上）{
$（'.popup'）.fadeIn（）；
});
$（'.close_pop'）。在（'click'，function（）上{
$（'.popup'）.fadeOut（）；
});
});
var max=真；
函数展开/折叠（elem）{
var top_div=elem.parentNode.parentNode.parentNode；
如果（最大值===false）{
elem.innerHTML=“▼；”；
top_div.classList.toggle（“最小化”，false）；
top_div.classList.toggle（“最大化”，true）；
max=真；
}else if（top_div.classList.contains（“最大化”））{
elem.innerHTML=“▲；”；
top_div.classList.toggle（“最小化”，true）；
top_div.classList.toggle（“最大化”，false）；
max=false
}
}
功能关闭按钮（elem）{
var top_div=elem.parentNode.parentNode.parentNode；
top_div.style.display='none'；
if（top_div.classList.contains（“最大化”））{
max=false；
}
}；
.popup{
显示：无；
}
.跳出来{
背景：#333；
边界半径：5px5px0；
盒影：0px 0px 10px#000；
}
.最小化{
显示：内联块；
右边距：10px；
底部：0；
宽度：250px；
高度：60px；
溢出：隐藏；
}
.最大化{
排名：0；
位置：固定；
显示：块；
宽度：自动；
高度：自动；
/*当最大化时，无论您想要什么样式，只要您将相同的样式添加到最小化类以将其更改回来*/
}
.关门{
光标：指针；
颜色：#fff；
}
.close_pop:悬停{
颜色：红色；
}
.展开/折叠{
右边距：10px；
光标：指针；
颜色：#fff；
高度：3倍；
}
.展开/折叠：悬停{
颜色：#ccc；
}
a{
位置：固定；
排名：150；
}

表1
▼
&时代
自15世纪以来使用的标准《知识产权》一文，是《知识产权法》的一部分，主要介绍了知识产权法在劳动和就业领域的应用
如果你是一个普通的消费者，你可以在你的房间里找到你的名字，但如果你是一个无足轻重的人，你就应该为你的行为负责
实验室。
这很好，我看到你改进了它，一次只能打开一个选项卡，这是个好主意，但是第一个链接是“单击此处打开”怎么样？代码只能关闭而不能最小化。这很有挑战性，我还想到了类似$（'.class1'）。toggleClass（'.class2'））.@John你说它只能关闭而不能最小化是什么意思？你点击了triangle@Weiss，对不起，我的意思是如果最大化按钮（三角形）单击最小化选项卡时，它不会替换最大化选项卡，必须先关闭上一个选项卡，我可能只需使用此代码并像这样使用它，谢谢，但如果您有其他想法，请与我们分享。：）@John好的，我明白你的意思。你可以让它在任何时候点击最大化按钮，它都会将最小化类应用到