部分或全部展開/摺疊w/jQuery

我想寫一個函數來允許展開和摺疊div。儘管如此，它並不那麼直截了當。如果div高於50px，我需要添加一個圖標（「展開」）以允許將其展開至全高。當它完全展開時，我需要將圖標的樣式更改爲（「摺疊」）並將其摺疊回50px。該圖標需要位於div的右下角。部分或全部展開/摺疊w/jQuery

我可以在一個頁面上有多個這樣的div。

現在，我可以得到一個div的高度，但我怎麼做的頁面和onload上的每一個？

var divHeight = $('.myDiv').height(); 

if (divHeight > 50) { 
    $('.icon_collase').appendTo('.myDiv'); 
} 

<style> 
.collasedDiv { 
    max-height:50px; 
} 
</style> 

$(".icon_collase").click(function() { 
    $('.icon_collase').toggleClass('icon_collase icon_expand'); 
    $('.myDiv').addClass('collasedDiv'); 
} 

<div class="myDiv"> 
// content here 
</div> 

<div class="myDiv"> 
// another content here 
</div>

來源

2011-04-14 santa

我不確定任何人都會爲你編寫整個代碼，但這裏有一組手風琴項目，我用一個「顯示更多」鏈接編程了更長的項目。您可以將其用作90％的起點，並計算出其他10％。

鏈接："More Info" Style Accordion

來源

2011-04-14 20:38:09 Dutchie432

$(".icon_collase").click(function(e) { 
    $(e.target).toggleClass('icon_collase icon_expand'); 
    $(e.target).closest('.myDiv').addClass('collasedDiv'); 

    $(".myDiv").each(function(){ 
     var divHeight = $(this).height(); 

     if (divHeight > 50) { 
      $(this).append('icon_collase');// you might want to edit this icon_collase should be a html element ? 
     } 
    }); 

}

獲取該元素被點擊你的事件變量分配給功能點擊，並通過調用e.target

最接近（）會選擇第一個獲得元素父元素匹配選擇器'.myDiv'。

執行單擊時，您將遍歷每個.myDiv以查找其高度，因此$（this）表示正在與之交互的div。

來源

2011-04-14 20:38:33

這不會解決切換功能的問題 - 因爲它會切換每個div，而不是點擊div – 2011-04-14 20:44:15

另外，由於'.appendTo'沒有傳遞一組對象，因此它只會將給定的摺疊元素追加到最後一個運行的元素上（它會每次刪除/追加） – 2011-04-14 20:47:06

正確。我編輯了代碼 – 2011-04-14 20:51:17

要獲得所有相關的申報單，這樣做：

var $YourDivs = $('.myDiv').filter(function(){ return $(this).height() > 50; });

然後，你需要一些東西附加到他們每個人是這樣的：

// since we're passing in a set, jquery will clone '.icon-collase' for you 
$('.icon_collase').appendTo($YourDivs);

類的切換功能，然後添加到所有崩潰圖標：

$(".icon_collase").click(function() { 
    $(this).closest('.myDiv').toggleClass('icon_collase icon_expand') 
});

來源

2011-04-14 20:43:38

部分或全部展開/摺疊w/jQuery

回答

相關問題