将子最大宽度添加到父元素的问题答案

【问题标题】：Issue adding child max width to parent element将子最大宽度添加到父元素的问题
【发布时间】：2013-12-04 11:02:11
【问题描述】：

我刚刚遇到了 JQuery 的问题。我做了简单的下拉导航。它运行良好。

            <div id="navigation" class="grid-container">
                <div class="menu-wrap grid-85">
                    <ul class="menu">
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a>
                            <ul class="submenu">
                                <li><a href="">Sarsauto</a></li>
                                <li><a href="">Acedelco</a></li>
                            </ul>
                        </li>
                        <li><a href="">Services</a>
                            <ul class="submenu">
                                <li><a href="">Purchase</a></li>
                                <li><a href="">Rental</a></li>
                                <li><a href="">MOT</a></li>
                            </ul>
                        </li>
                        <li><a href="">Catalog</a></li>
                        <li><a href="">Contacts</a>
                            <ul class="submenu">
                                <li><a href="">Find Us</a></li>
                                <li><a href="">Contact Us</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>

现在我正在尝试使父元素 ul.menu li 的宽度与最大的子元素 ul.menu li ul.submenu 的宽度相同。这是jquery代码：

    $(document).ready(function(){
        var maxWidth = "0px";

        $("#navigation ul.submenu").each(function(){
            var currentWidth = $(this).css("width");
            if(currentWidth > maxWidth){
                maxWidth = currentWidth;
            }
        });

        $("#navigation ul.menu li").css("width",maxWidth);
    });

现在，它所做的是添加属性 style 与 width=0px，而不是 maxWidth。请帮我找出问题所在。先感谢您！ :)

【问题讨论】：

maxWidth 和 currentWidth 不应该是字符串...您在这里比较两个字符串：if(currentWidth > maxWidth)
谢谢，这是主要问题之一。问题仍然存在。

标签： jquery html drop-down-menu width each

【解决方案1】：

试试吧：

$(document).ready(function () {
    var maxWidth = 0;

    $("#navigation ul.submenu").each(function () {
        var currentWidth = $(this).width();
    if (currentWidth > maxWidth) {
        maxWidth = currentWidth;
    }
    });

$("#navigation ul.menu li").width(maxWidth);
});

【讨论】：

这在我在最后一行添加 +"px" 时起作用，因此它将格式化的像素大小返回给元素。谢谢！ :)

【解决方案2】：

在运行时检索宽度时，在 + 符号之前。它会将其转换为integer 值。而您将maxWidth 分配为字符串，这也会导致比较时出现问题。

试试这个，

$(document).ready(function(){
        var maxWidth = 0;

        $("#navigation ul.submenu").each(function(){
            var currentWidth = +$(this).css("width");
            if(currentWidth > maxWidth){
                maxWidth = currentWidth;
            }
        });

        $("#navigation ul.menu li").css("width",maxWidth);
    });

【讨论】：