4

overflow:hidden が適用された水平メニューがあります。

メニューはCMSで管理されているため、オーバーフローしない場合もありますが、オーバーフローした場合は、最後に表示されているli要素を見つけて、オーバーフローしたメニュー項目を含むドロップダウンulを挿入したいと考えています。私が抱えている問題は、overflow:hidden によって非表示にされた要素がまだ表示されているように見えるため、(その前に HTML を挿入するために) 表示されている最後の li を選択することです。

これまでの私のコードは次のとおりです。

$(window).load( function () {

    var totalWidth = 0;
    var menu = $('.nav .menu ul');
    var menuWidth = menu.innerWidth();

    menu.find('li').each(function() {
       totalWidth += $(this).innerWidth() + 30; // add margin
    });

    if (totalWidth > menuWidth) {

        var num_li = $('.nav .menu ul > li:visible').length;

        $('.nav .menu ul li:nth-child('+num_li+')').append("<li><a>More</a></li>");
    }

});

変数 num_li は、ページを見ている人に見えるものだけではなく、li 要素の完全な数を返しています!

4

2 に答える 2

2

私は自分でこれに対する解決策を考え出さなければならなかったので、それを共有したいと思いました。

function getVisible($elements, $container) {
    return $elements.filter(function (i, e) {
        var $e = $(e);

        return ($e.offset().left >= $container.offset().left) && ($e.offset().left + $e.width() <= $container.offset().left + $container.width());
    });
}

*編集 - これは、水平方向に表示される要素をテストするためだけのものです。offset().top垂直方向の場合、 vs.$container.height()などに対するテストを追加する必要があります。

于 2016-11-15T15:10:34.213 に答える