jQuery的：在多段切換高度與一個功能

我有多個部分，三是不同高度的精確，有一個基本的佈局：jQuery的：在多段切換高度與一個功能

<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進一步充實。

來源

2011-07-27 jezza-tan

您的網頁，而不是存儲的高度。

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'); 
}

有完整的代碼更新了點擊功能

來源

2011-07-27 14:19:13

這將是一個完美的答案，是我一直在尋找，但我遇到的問題是變量'sectionSize'的變化。如果我點擊一個部分，它會崩潰並將'sectionSize'標記爲'collapsed'，但如果我點擊另一個部分，它也會崩潰，但不會恢復到正常大小。 –

你可以用類似的方法解決這個問題。使用數據函數將sectionSize添加到元素本身，並檢查該元素，而不是使用全局變量。 –

這是完美的！非常感謝！ –

Check out 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'); 
});

或......

尋找到一個全局變量（一般不好用呢全局變量）的設置使用jQuery UI的手風琴

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

來源

2011-07-27 14:17:50

您可以將默認高度的部分，讓你知道每個點擊哪裏：使用數據（）的jQuery的功能來存儲它反對元素設置該部分的高度。我已經得到它在這個jsFiddle工作：http://jsfiddle.net/uchV3/

來源

2011-07-27 14:27:08 ShaneBlake

jQuery的：在多段切換高度與一個功能

回答

相關問題