Question

我有一个div，里面有一个可扩展的列表。 div的最大高度为450px，因此列表不会超出该范围。我在div上有一组箭头，在点击时向上和向下滚动div，但是只有当它的高度达到450px时我才需要向div添加/向下箭头。这是我到目前为止所拥有的......

<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的高度而没有用户驱动的事件。

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

Answer 1

因此，通过查看网站，看起来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-element，然后在window.load（）或document.ready（）中添加类似的内容：

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

您也可以在页面加载开始时调用此函数一次，以便它也检查初始大小

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

  //additional page code
});

这将在开始时调用函数一次最初添加箭头（如果需要）然后每次单击带有'list-element'类的项目，这将是您的列表元素，导致您的div改变高度

Answer 2

您需要使用overflow: auto。当元素内容的高度超过元素的最大高度时，只会在div上放置一个滚动条。

所以在你的css中：

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

如果div高度改变，jQuery addClass

2 个答案: