Question

我想进行子导航测量其父级宽度，然后相应地设置自己的宽度。目前，每个子导航（.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);

});

Answer 1

    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/

Answer 2

我看了你的样子并在评论你的部分之后添加了我的代码并得到了相同的东西。

<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的LI上应用position: relative;，然后position: absolute; left: 0; top: ~20px;（顶部根据你的尺寸稍微倾斜..这将做同样的事情，除了它不会包裹你的孩子，使它看起来很奇怪。

如果你给我一个你希望你的菜单看起来像的确切图像（不使用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();

如何测量和设置宽度？

2 个答案: