如果div高度發生變化，jQuery addClass

我有一個在其中具有可擴展列表的div。 div的最大高度爲450px，這樣列表就不會超出這個範圍。我在div上有一組箭頭，它可以在點擊時上下滾動div，但是隻有在高度達到450px時，我才需要向div添加向上/向下箭頭。這是我到目前爲止......如果div高度發生變化，jQuery addClass

<script type="text/javascript"> 
$("#sidebar-container").addEventListener("overflow", function(){ 
if($("#sidebar-container").height() == 450) { 
    $('.sidebar-arrow-up').addClass('arrow-show'); 
    $('.sidebar-arrow-down').addClass('arrow-show'); 
} 
else{ 
    $('.sidebar-arrow-up').removeClass('arrow-show'); 
    $('.sidebar-arrow-down').removeClass('arrow-show'); 
} 
},false); 
</script>

我已經嘗試點擊事件，但需要此檢查無需用戶驅動事件的div的高度。

鏈接：http://shamounwp.theinfiniteclients.com/procedures/breast/types-of-procedures/choiceswhich-one-is-right-for-me/

來源

2013-08-06 Jaymes

jQuery對象沒有' addEventListener'方法，並且沒有'overflow'事件？ – adeneo

我知道這段代碼不正確，我嘗試了大約15種不同的東西。只是展示我目前的情況，看看有沒有人有真正的答案。 – Jaymes

看看window onload事件或者文檔準備就緒已經足夠 –

所以從查看的網站，它看起來像div時您單擊列表元素上僅會改變大小。我覺得你最好的選擇是創建這樣的函數

function checkSize(){ 
    if($("#sidebar-container").height() == 450) { 
    $('.sidebar-arrow-up').addClass('arrow-show'); 
    $('.sidebar-arrow-down').addClass('arrow-show'); 
    } 
    else{ 
    $('.sidebar-arrow-up').removeClass('arrow-show'); 
    $('.sidebar-arrow-down').removeClass('arrow-show'); 
    } 
}

，然後添加一個類每個列表元素如.LIST元素，然後有這樣的事情在你的window.load（）或文檔。就緒（）：

$('.list-element').click(function(){ 
    checkSize(); 
});

您還可以一次在頁面加載的開始調用此函數，以便它檢查的初始大小以及

$(document).ready(function(){ 
    checkSize(); 

    //additional page code 
});

這將在開始一次調用函數廣告d最初的箭頭（如果需要的話），然後每次點擊具有'list-element'類的項目，這將是你的列表元素，導致你的div改變高度的東西

來源

2013-08-06 19:41:40 Ian

謝謝！補充說，它似乎工作，唯一的問題是，點擊事件檢查調整大小之前div的大小。有沒有辦法給函數添加一個延遲來擴展所有的列表？ – Jaymes

嗯，你可以使用'setTimeout（checkSize（），1000）;'來延遲函數調用1秒，但這似乎更像是一個迂迴的解決方案。你是否在擴展列表中使用插件？這可能會使事情變得更加困難，但大多數jquery函數可以將函數句柄作爲參數，並在完成時調用該函數，例如'.fadeout（'slow'，myFunc（））;'在完成淡入淡出後調用myFunc。如果你正在調整自己的大小，最好的解決方案是添加checkSize（）函數來完成調用 – Ian

明白了。 setTimeout工作完美！非常感謝！ – Jaymes

你需要使用overflow: auto。只有當元素內容的高度超過元素的最大高度時，纔會在div上放置滾動條。

所以在你的CSS：

#sidebar-container { 
    max-height: 450px; 
    overflow: auto; 
}

來源

2013-08-06 19:32:54

我有這個，但我想要使用向上/向下箭頭上div /而不是滾動條的div。 – Jaymes

好的，所以當用戶展開列表時，請檢查當時的高度。如果高度大於450px，請添加箭頭。 –

div是一個具有父元素和子元素的邊欄列表，因此div可以從400px開始，但是當單擊父項時出現的列表項會使div的高度更大。 – Jaymes

如果div高度發生變化，jQuery addClass

回答

相關問題