Javascript jQuery：使用一个函数在多个部分上切换高度

我有多个部分，确切地说是三个，高度不同，基本布局如下：

    <section>
       <h2>My heading</h2>
    </section>

我这里有一个更完整的版本，HTML和CSS进一步充实。

查看slideToggle（）

我会在H2标记下面创建一个容器，其中包含一个类，如：

 <h2>Header</h2>
 <div class="slideThis">
 some content
 </div>

或者

研究如何使用jQueryUIAccordion设置页面

---

而不是将高度存储在全局变量中（通常使用全局变量是不好的）。使用jquery的data（）函数将其存储到元素中：

var parentSection = $(this).parents("section");   
var sectionSize = $(this).data('sectionSize') || "normal";   
if (sectionSize == "normal") {
    $(this).data('sectionHeight' parentSection.height());
    parentSection.animate({height:"68px"},"fast"),
    $(this).data('sectionSize', 'collapsed');
 }
 else {
     parentSection.animate({height:$(this).data('sectionHeight')},"fast"),   
     $(this).data('sectionSize', 'normal');
 }

---

更新了单击功能的完整代码

您可以在节中存储默认高度，以便每次单击时都知道在何处设置该节的高度。我已经在这个jsFiddle中使用了它：

这将是一个完美的答案，也是我一直在寻找的，但我遇到的问题是变量

sectionSize

的更改。如果我单击一个部分，它将折叠并将

sectionSize

标记为

collapped

，但如果我单击另一个部分，它也将折叠，但不会返回到其常规大小。您可以用类似的方法解决此问题。使用data函数将sectionSize添加到元素本身，并检查它，而不是使用全局变量。这太完美了！非常感谢你！

 $('h2').click(function(){
       $(this).next('.slideThis').slideToggle('slow');
 });

var parentSection = $(this).parents("section");   
var sectionSize = $(this).data('sectionSize') || "normal";   
if (sectionSize == "normal") {
    $(this).data('sectionHeight' parentSection.height());
    parentSection.animate({height:"68px"},"fast"),
    $(this).data('sectionSize', 'collapsed');
 }
 else {
     parentSection.animate({height:$(this).data('sectionHeight')},"fast"),   
     $(this).data('sectionSize', 'normal');
 }