我想在不使用任何 AJAX 工具包的情况下创建自己的手风琴组件，主要用于学习目的。我不确定从哪里开始。我假设我将从为手风琴的每个部分创建 div 开始。也许每个 div 都包含一个标题，这将是选择用于将手风琴移动到该部分的实际按钮。不过，我不确定选择手风琴的部分按钮后采取的正确方法。我会使用 z 顺序，以便每个部分都具有更高的 z 顺序吗？任何帮助表示赞赏。
谢谢
【问题讨论】：
标签： javascript jquery ajax
我强烈建议您阅读 John Resig 的 Pro JavaScript techniques 之类的书，该书将为您提供一些关于如何构建自己的客户端解决方案的想法和初步想法。
基本上，您将有一个元素充当标题，例如<h1> 或<div>，在其下您将有一个<div>，初始样式为display: none;。在标题的单击事件上设置事件处理程序，以将下面 div 的样式更改为 display: block 并确保隐藏任何其他内容 <div>s（通过在每个内容 <div> 上使用 CSS 类来做到这一点例如）。
我将把流畅的动画留给你，作为练习如何完成它。作为提示，我建议通过查看源代码来查看像 jQuery 这样的 JavaScript 库如何处理动画。
【讨论】：
最好的订购方式是这样
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
你会想要完全避免z-order，因为它是一个兼容性问题。相反，您将拥有手风琴标题，即单击以打开手风琴。您可能希望默认将所有手风琴部分<div> 设置为visibility:hidden;，然后，当单击其中一个时，更改其可见性，并隐藏所有其他部分。如果您希望它与任意数量的手风琴部分一起使用，您可以让它计算每个 <h3 class="accordion title"> 和每个 <div class="accordion section">，并将它们配对成一个数组。单击标题时，显示其对应的 div。或者，您可以给每个人一个单独的 ID，但第一种方法会更有用。
其实可能是display:none;而不是visibility:hidden;，我两个都试试。
另外值得一提的是，动画通常是通过改变 div 的大小等来处理的，所以如果你隐藏了一个部分，你会越来越小，直到它达到 0 并被隐藏。
【讨论】：
请参阅this question，您会注意到我的答案包含一个演示，其中包含应该让您入门的基本工作原理。几分钟前才被问到！
它使用 jQuery。
【讨论】：