如何測量和設置寬度？

-1

我想使子導航測量其父寬度，然後相應地設置自己的寬度。此刻，每個子導航（.primary-navigation ul ul）都會獲得一個單獨的類（customWidth-0 + i）。然後使用這個類，我測量它的父母的寬度，並設置寬度減去填充。這一切都很好，但我正在學習，我想縮短腳本。我試圖循環這個，使用「this」，但似乎卡住了每一點。學會以適當，穩健的方式來做到這一點很好。很感謝任何形式的幫助。謝謝。如何測量和設置寬度？

jQuery(document).ready(function() { 
    jQuery(".primary-navigation ul ul").each(function(i) { 

     i = i+1; 

     jQuery(this).addClass("customWidth-0" + i); 
    }); 

    a = jQuery(".customWidth-01").prev().parent().width(); 
    b = jQuery(".customWidth-02").prev().parent().width(); 
    c = jQuery(".customWidth-03").prev().parent().width(); 
    d = jQuery(".customWidth-04").prev().parent().width(); 

    jQuery(".customWidth-01").css("width", a-31); 
    jQuery(".customWidth-02").css("width", b-31); 
    jQuery(".customWidth-03").css("width", c-31); 
    jQuery(".customWidth-04").css("width", d-31); 

});

來源

2014-09-04 joe

我把你的樣子和評論你的款款走出後添加我的代碼，並得到了同樣的事情。

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".primary-navigation ul ul").each(function(i) { 

      i = i+1; 
      var _this = jQuery(this), w = _this.parents('ul').width(); 
      _this.css("width", (w-31)+"px"); 
      //jQuery(this).addClass("customWidth-0" + i); 
      console.log(i); 
     }); 
    /* 
     a = jQuery(".customWidth-01").prev().parent().width(); 
     b = jQuery(".customWidth-02").prev().parent().width(); 
     c = jQuery(".customWidth-03").prev().parent().width(); 
     d = jQuery(".customWidth-04").prev().parent().width(); 

     jQuery(".customWidth-01").css("width", a-31); 
     jQuery(".customWidth-02").css("width", b-31); 
     jQuery(".customWidth-03").css("width", c-31); 
     jQuery(".customWidth-04").css("width", d-31); 
    */ 
    }); 
</script>

它會找到給定的ul上面的div，並將其寬度取下31px，然後將其應用於下面的給定元素。 UL內部的LI元件已經具有100％的寬度並且符合該標準。如果你想要，你可以在.primary-navigation的LIs上應用position: relative;，然後position: absolute; left: 0; top: ~20px;（根據你的em尺寸，頂部是有點偏斜的。）除了它不會包裹你的孩子和使它看起來很奇怪

如果你給我一個你想要的菜單看起來像（不使用JavaScript或任何可能是一個設計的版本??）的確切圖像我可能做得更好，因爲這仍然有點兒很難回答，希望我提供的代碼可以幫助你，如果不發表意見時，讓我知道，如果你有問題。

以下行是舊的答案。

設置一個變量

var _this = jQuery(this), w = _this.parent().parent().width(); 
_this.css("width", (w-31)+"px");// just to be safe added px use w/e or leave blank it assumes it

這應該爲你工作一樣的，你在foreach擁有它。

你也可以使用.parents('ul')

w = _this.parents('ul').width();

來源

2014-09-04 17:52:47

我嘗試使用你的代碼，但這似乎並沒有伎倆。簡而言之，主導航有子導航的子項。該子導航在懸停時可見。我希望子導航的寬度與其父級完全相同。例如，當您打開特定頁面時，鏈接文字變爲粗體，因此在導航中佔用更多空間。所以子導航的寬度必須更長。不知道這是否說明了我的觀點，但這是一個粗略的例子：http://jsfiddle.net/jmarkevicius/b2ymryp0/ – joe 2014-09-09 15:52:30

謝謝凱西。我嘗試使用你的建議代碼，但由於某種原因，它測量了錯誤的元素，因此設置了錯誤的寬度。這是佈局的圖像：http://i60.tinypic.com/23p37s。png – joe 2014-09-15 16:53:52

好的，應該可以幫到更多。我有點揣測某些東西。讓我稍後再看看，因爲我不能在這一分鐘，但如果你事先解決它，那就很好。我會盡快告訴你。希望別人能在我之前解決它，所以你不必等太久。 – 2014-09-15 17:48:55

function() { 
     $('.primary-navigation').children('li').each(
    function(index) { 
     var parentWidth = $(this).width(); 
     $(this).children('ul').width(parentWidth/2); 
     } 
    );

這是你在找什麼？現在所有的子菜單都是父項的1/2。你需要修復它以滿足你的特定需求。

DEMO http://jsfiddle.net/La07pvf2/

來源

2014-09-04 17:52:44 aahhaa

您的代碼似乎沒有這樣的伎倆。寬度=父寬-31像素。簡而言之，主導航有子導航的子項。該子導航在懸停時可見。我希望子導航的寬度與其父級完全相同。例如，當您打開特定頁面時，鏈接文字變爲粗體，因此在導航中佔用更多空間。所以子導航的寬度必須更長。不知道這是否說明我的觀點，但這裏是一個粗略的例子：http://jsfiddle.net/jmarkevicius/b2ymryp0/ – joe 2014-09-09 15:53:31

如何測量和設置寬度？

回答

相關問題