如果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

回答

相关问题