1

ドロップダウンメニューのメインナビゲーションバーのサイズを動的に変更して、ナビゲーションメニュー項目名のさまざまな長さの文字に対応できるようにサイズを変更する必要があります。以下はこれまでの私のコードです：

 $(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;

            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };
          });    
       });

問題は、すべてのliの合計幅を取得しても、何らかの理由でwNavがその幅にリセットされず、理由がわからないことです。よろしくお願いします。

4

2 に答える 2

1

これは、外側の幅のみを計算し、設定していないためです。

$(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;

            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };

            //setting outer width
            $("#navigation").outerWidth(wNav);
          });    
       });

このプラグインを使用して jquery.dimensions.etc.js http://bitovi.com/blog/2010/06/set-inner-outer-width-height-with-jquery-dimensions-etc-plugin.html

于 2012-07-31T22:21:36.150 に答える
1 
$(document).ready(function() {
    var wNav = $("#navigation").outerWidth();
    var wLiTotal = 0;

    $("#navigation>ul>li").each(function() {
        wLiTotal += $(this).outerWidth();
        if ((wLiTotal > wNav) || (wLiTotal < wNav)) {
            wNav += wLiTotal + 3;  // you've increase wNav with its previous value
        };
    });
    $("#navigation").width(wNav); // set new wNav as new width
});
于 2012-07-31T22:33:20.653 に答える