Question

我有多个部分，准确地说是三个部分，具有不同的高度，基本布局为：

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

我正在寻找一种最初显示它们的方法，但是当用户点击<h2>时，将该部分减少到68px的高度。主要问题是每个部分的高度不同（即第一个是478px，第二个是2118px，第三个是247px），但我不想为每个部分编写一个单独的函数，并且希望在一。它工作正常，直到我关闭第一部分，而不是重新打开它，点击第二部分的<h2>。这就是问题开始的地方。所以我的问题是，无论如何要做到这一点，还是我需要为每个部分单独的功能？

sectionSize = "normal";
$(document).ready(function(){
  //var sectionSize = "normal";
  $("h2").click(function(){
     var parentSection = $(this).parents("section");      
    if (sectionSize == "normal") {
      sectionHeight = parentSection.height();
      parentSection.animate({height:"68px"},"fast"),
      sectionSize = "collapsed";
    } else {
      parentSection.animate({height:sectionHeight},"fast"),   
      sectionSize = "normal";
    }
  });
});

我在这里有一个更全面的版本http://jsfiddle.net/Skooljester/94yqX/，HTML和CSS进一步充实。

Answer 1

而不是将高度存储在全局变量中（无论如何通常不好使用全局变量）。使用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');
 }

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

Answer 2

查看slideToggle（）;

http://api.jquery.com/slideToggle/

我会在H2标签下面创建一个容器，例如：

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

然后，

写一些与此类似的jQuery：

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

OR ......

查看使用jQuery UI Accordion设置页面

http://jqueryui.com/demos/accordion/

Answer 3

您可以在部分中存储默认高度，以便您在每次单击时知道设置该部分高度的位置。我已经让它在这个jsFiddle中工作了：http://jsfiddle.net/uchV3/

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

3 个答案: