如何测量和设置宽度？

-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

如何测量和设置宽度？

回答

相关问题