0

我在页面左侧有这个固定的菜单栏。但是，如果窗口不够高而无法同时显示所有项目，我希望隐藏菜单项。固定菜单栏隐藏了溢出以避免滚动条。我当前的脚本做得很好，但它会变得很长，因为我可能有大约 30 个不同的菜单项，这意味着它需要许多 if/else 语句来执行此操作。每次调整窗口大小时，我都会执行此函数。

function resizeMenu() {
    var win_h = $(window).height();
    if (win_h < 220) {
        $('div.list_item_btn').show().slice(1).hide();
        $('.down_arrow').show();
    } else if (win_h < 288) {
        $('div.list_item_btn').show().slice(2).hide();
        $('.down_arrow').show();
    } else if (win_h < 356) {
        $('div.list_item_btn').show().slice(3).hide();
        $('.down_arrow').show();
    } else {
        $('div.list_item_btn').show()
    }
}

因为每个 item-s 的高度都是 68px，所以我必须不断地应用68增加的数量。我知道有一个更好的解决方案，但这是棘手的事情。如果没有显示所有项目，我想在底部显示一个箭头。单击此箭头时，我希望菜单项向上滑动并在顶部隐藏 1，在底部再显示 1。

但是我不知道如何将内容向上滑动，只要它被隐藏..这没有任何意义，我有点失败了..

4

2 回答 2

1

您可以使用此处的函数来检查是否list_item_btn在视口中，如果不在则隐藏它。

var anyHidden = 0;
$("div.list_item_btn").each(function() {
  if (!elementInViewport($(this))) {
    anyHidden = 1;
    $(this).hide();
  } else {
    $(this).show();
  }
}
if (anyHidden>0) {
  $(".down_arrow").show();
}
于 2012-11-08T11:41:45.477 回答
0 
function resizeMenu() { 
var win_h = $(window).height();   
var height = 220;

    for(var i=1; i <= $('div.list_item_btn').length; i++){
              if (win_h < height) {
                $('div.list_item_btn').show().slice(i).hide();
                $('.down_arrow').show();
                height += 68;
            } else{
                $('div.list_item_btn').show()
                break;
            }
        }
   }//end function

像这样的东西？虽然不知道你想切片什么，但这应该会大大缩短你的代码。

于 2012-11-08T11:14:19.317 回答