在下拉菜单元素的样式属性中添加最大宽度时出现问题

Question

我只是无法在这里弄清楚或找到任何解决方案，所以我选择问一个问题。我有普通的 css/html 下拉菜单代码，可以工作并且看起来不错，但是当我添加 jquery 时，问题就开始了。正如您在下面的示例中看到的，我正在尝试添加同一棵树 （ul.children li） 元素的最大值 宽度 作为此树中所有元素的宽度。好吧，添加了该属性，但是该值为0px，即使我尝试将元素范围更改为所有ul，该值仍然存在。是什么与代码一起输出 0px 而不是需要元素的最大宽度值。提前感谢！

这是纯的HTML代码：

<ul>
   <li class="page_item page-item-2"><a href="">Sākumlapa</a></li>
   <li class="page_item page-item-4"><a href="">Par mums</a>
      <ul class="children">
        <li class="page_item page-item-6"><a href="">Galerija</a></li>
      </ul>
   </li>
</ul>

这是jQuery代码：

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

                            $('.children li').each(function() {
                                elemWidth = parseInt($(this).css('width'));
                                if (parseInt($(this).css('width')) > maxWidth) {
                                    maxWidth = elemWidth;
                                }
                             });

                            $('.children li').each(function() {
                                  $(this).css('width', maxWidth + "px");
                            });
                       });

执行后，您可以看到为 children.li 元素添加了 style 属性，但它包含 0px 不是元素的最大宽度。这是从浏览器复制和粘贴代码。

<ul>
   <li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2">Sākumlapa</a></li>
   <li class="page_item page-item-4"><a href="http://localhost/wordpress/?page_id=4">Par mums</a>
      <ul class="children">
        <li class="page_item page-item-6" style="width: 0px;"><a href="http://localhost/wordpress/?page_id=6">Galerija</a></li>
      </ul>
   </li>
</ul>

Answer 1

>.outerWidth()获取计算的宽度，而不是 CSS 设置的值。我建议您尝试这样使用它：

var maxWidth = 0;
var elemWidth = 0;

$('.children li').each(function() { 
    elemWidth = $(this).outerWidth();
    if (parseInt($(this).css('width')) > maxWidth) {
        maxWidth = elemWidth;
    }
});

Answer 2

$(document).ready(function() {
                            var maxWidth = 0;
                            var elemWidth = 0;
                            $('.children li').each(function() {
                                elemWidth = parseInt($(this).outerwidth());
                                if (elemWidth  > maxWidth) {
                                    maxWidth = elemWidth;
                                }
                            });
                            $('.children li').each(function() {
                                $(this).css('width', maxWidth + 'px');
                            });
                        });

这是演示 http://jsfiddle.net/n4CQv/2/

Answer 3

非常接近！如果这是一个下拉列表，大概下拉菜单在您的 css 中默认设置为 display: none，然后在将父级悬停时显示？如果是这种情况，那么当元素的显示属性为 none 时，元素没有尺寸，您需要使用 visibility: hidden 来隐藏它们并将它们设置为默认 css 中的display: block，这意味着它们不会被显示，但仍会占用它们的空间。你的javsacript很好，但是你可以使用jquery的.width()方法来整理一下，加上第二种$.each方法是不必要的：

$(document).ready(function() {
  var maxWidth = 0;
  var elemWidth = 0;
  $('.children li').each(function() {
    elemWidth = $(this).width();
    if (elemWidth) > maxWidth) {
      maxWidth = elemWidth;
    }
  });
  $('.children li').width( maxWidth );
});

Answer 4

我在文档加载后和 each 函数之前添加了这一行：

    $('.navigation li').hover(function(){
       // here goes the whole code above
    });

这解决了我的问题！