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 要素の完全な数を返しています!