1

誰かがこれを手伝ってくれることを願っています。

既存のリスト項目の数と親コンテナーの残りの幅に基づいて、nav ul の最終的な li 項目に幅を追加する関数を作成しました。

これは、ドキュメントの読み込み時、およびドキュメントのサイズが変更されて href がクリックされた場合に正常に機能しますが、実際のサイズ変更中に要素のサイズが再計算されません。

これを説明するのに役立つフィドルを作成しました。

ウィンドウのサイズ変更中に動的に計算を行う方法を知っている人はいますか?

これはjsです

 $(document).ready(calcWidth);
$(document).resize(calcWidth);

function calcWidth(){
    // get array of all the list items in the nav
    var $listWidth = $('ul#main-nav li').map(function(){
        return $(this).width();
    }).get();
    var $itemCount = $('#main-nav li').length; //this works as margin-right is set to 1px
    var $contWidth = $('#main-nav').width(); // get the full container width
    var $sum = 0;
    $.each($listWidth,function(){$sum+=parseFloat(this) || 0;});
    $('ul#main-nav li.final a').css({
        width:  $contWidth - $sum - $itemCount, //set the width of the final li to be the total container minus the sum of the existing li elements
        height: '12px'
    });
}

ここに投稿されたコードがさらに必要な場合はお知らせください。ただし、それはすべてフィドルにあります。

ありがとうルーク

4

1 に答える 1

2

これを JavaScript で行う必要はありません。

UL 上のクラスを移動しclearfix(リスト アイテムがフローティングされているため)、UL に紫色の背景を追加し、リスト アイテムに 1 ピクセルの白い右枠を追加します。そして、最後の LI を削除できます。

ここで見る

于 2013-02-08T13:02:27.467 に答える