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

すべてのアイテムの高さが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 に答える