0

我有一个 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 的高度。

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

4

2 回答 2

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

这将在开始时调用该函数一次以最初添加箭头（如果需要），然后每次单击具有“列表元素”类的项目时，这将是您的列表元素，导致您的 div 更改的事物高度

于 2013-08-06T19:41:40.653 回答
0

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

所以在你的CSS中：

#sidebar-container {
    max-height: 450px;
    overflow: auto;
}
于 2013-08-06T19:32:54.800 回答