关于重写和清理扩展/折叠框的建议/头脑风暴

Question

我想问一些关于清理一些简单的扩展和折叠内容框的建议。我花了一些时间得到几个想法，但我不喜欢HTML的复杂性，并认为加载内容真正的ajax会很好。

请点击此处：http://jsfiddle.net/A9rKm/11/

所以改进的基本思路是：

• 您有一个折叠框，点击它会展开并加载
• 有2个状态，1个折叠，1个展开并在它们之间切换，删除div的内部div（展开的div在折叠的div中）
• 在内容true ajax中展开切换加载 *真的想要删除折叠div中扩展的div，任何人都知道如何做到这一点？ THX！

有关改进清理html并通过仅加载扩展状态的内容来减少页面内部html的想法吗？

更新： 似乎这可以通过Accordion插件完成，我不知道！ 但我更愿意学习如何从头开始编写这个代码，因为我认为这个问题不应该关闭

UPDATE2： 任何人都建议使用某种手风琴插件来了解它的编写和学习方法？

Answer 1

由于您似乎想要学习如何操作，我不建议您插入插件并将其留下。有时候了解事情是如何运作的更好。你的基本步骤将是这样的：

1. 确定控件的语义标记。即如果你扩展所有状态并关闭CSS，它会是什么样的？

2. 从折叠的所有项目开始。确保CSS规则在使用visibility：hidden，display：none或height：0或组合加载时隐藏用户的任何内部内容。

3. 使用jQuery .click()处理对项目的点击。在这个事件处理程序中，您将需要使用jQuery的.ajax()调用相关的ajax结果，无论是JSON，HTML页面还是其他任何内容。

4. 在ajax调用中的成功事件处理程序中，您需要将结果附加到项目的内容中。

5. 将项目的内容设置为全高，然后将其淡入。

6. 第二次单击时，您将执行相反的操作，当动画完成时，您可以隐藏内容或删除内容。我建议隐藏它，这样你就不需要再次获取相同的数据了。

7. 在每个可以想象的浏览器中测试它，这种功能经常会出错，特别是在IE中

Answer 2

我通过增加一小时的黑客攻击和研究来解决这个问题，现在它的工作很棒:)请求建议。