Javascript 向上折叠开口

我对编码还不熟悉，我希望在页面底部有这样的面板，当按下时，它会打开一些带有按钮的菜单，我认为最好的选择是折叠。但是在阅读了W3schools教程之后，我没有找到任何关于如何使它们朝上打开的参考资料。我希望它不会移动整个页面，只是打开一个可点击的窗口。如果不是的话，我想知道用什么东西来做这个。这是来自W3学校的代码

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.可折叠：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}

动画可折叠
可折叠的：

开放式可折叠
上一个（只有一个不够）

可折叠集：

开放式第一节
一,

开放式第2节
二,

开放式第3节
三,

您应该将

内容

变量设置为

previouselement同级

，以便在之前获取元素

var content = this.previousElementSibling;

然后，交换折叠按钮和内容的顺序，如下所示：

<div class="content">
      <p>upper one (only one is enought).</p>
</div>
<button class="collapsible">Open Collapsible</button>

上一个（只有一个不够）

开放式可折叠

---

jsiddle:

它们向下打开的原因是html结构和css指示它是这样的，例如：

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>upper one (only one is enought).</p>
</div>

<ul class="magic-content">
<li>an example list item</li>
<li>another example item</li>
</ul>
<a class="magic-button" href="#">my magic button</a>

您的css需要有如下内容：

.magic-content {display:none;}
.magic-content.on {display:block;}

因此，类“on”的切换触发了内容的显示/隐藏

或者，您所指的示例可以在此处找到：

在他们的示例中，要颠倒顺序，只需更改html元素的顺序：

<div id="myDIV">
This is a DIV element.
</div>
<button onclick="myFunction()">Try it</button>

这是一个DIV元素。
试试看

内容后面的按钮。我希望这有帮助。

---

G

谢谢！我现在正试图用下拉菜单做些什么，但这似乎更好。但你真的能在崩溃中崩溃吗？当点击时，它能打开折叠的od侧而不是上方吗？（对不起，我不知道这些东西是怎么叫的，就像把它放在右边一样）。@Holsp当然！如果有帮助，请考虑将问题标记为答案。你可以在折叠中折叠，你只需在另一个内容中添加相同的内容。

<div id="myDIV">
This is a DIV element.
</div>
<button onclick="myFunction()">Try it</button>