Question

我想在不使用任何AJAX工具包的情况下创建自己的手风琴组件，主要用于学习目的。我不确定从哪里开始。我假设我将首先为手风琴中的每个部分创建div。也许每个div都包含一个标题，这个标题是选择将手风琴移动到该部分的实际按钮。虽然选择了手风琴的部分按钮，但我不确定采取的正确方法。我会使用z顺序，以便每个部分都具有更高的z顺序吗？任何帮助表示赞赏。

由于

Answer 1

订购它的最佳方式就是这样

<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并被隐藏。

Answer 2

我强烈建议您选择一本书，例如John Resig的Pro JavaScript techniques，它会为您提供一些关于如何建立自己的客户端解决方案的想法和初步想法。

基本上，您可以使用一个元素作为标题，例如<h1>或<div>，在该标题下，您的<div>初始样式为display: none; 。在标题的click事件上设置一个事件处理程序，将下面div的样式更改为display: block并确保隐藏任何其他内容<div>（通过在每个内容上使用CSS类来执行此操作例如，内容<div>。

我会把流畅的动画留给你作为练习如何完成。作为提示，我建议通过查看源代码来查看像jQuery这样的JavaScript库如何处理动画。

Answer 3

请参阅this question，您会发现我的答案中包含一个演示文稿，其中包含可以帮助您入门的基本工作原理。几分钟前才问过这个问题！

它使用jQuery。

Javascript手风琴如何工作？

3 个答案: