Question

我在页面左侧有一个固定的菜单栏。但是如果窗口不够高，无法同时显示所有项目，我希望隐藏菜单项。固定菜单栏有一个隐藏的溢出，以避免滚动条。我当前的脚本做得很好，但它会变得很长，因为我可能有大约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()
    }
}

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

但我不知道如果内容被隐藏起来如何滑动内容..这没有任何意义，我有点失败了这个......

Answer 1

您可以使用here中的函数来检查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();
}

Answer 2

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

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

jQuery - 如果窗口不够高，则隐藏项目

2 个答案: