Question

我刚刚遇到了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 的宽度设置为与bigest子元素 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 。请帮我找到问题。先感谢您！：）

Answer 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);
});

Answer 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);
    });

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

2 个答案: