0

我只是想不出或在这里找到任何解决方案，所以我选择问一个问题。我有简单的 css/html 下拉菜单代码，它可以工作并且看起来很好，但是当我添加 jquery 时，问题就开始了。正如您在下面的示例中看到的那样，我正在尝试将同一棵树（ul.children li）元素宽度的最大值添加为该树中所有元素的宽度。好吧，该属性已添加，但该值是 0px 并且即使我尝试将元素范围全球化更改.children到所有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 元素添加了样式属性，但它包含 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>
4

4 回答 4

1

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

var maxWidth = 0;
var elemWidth = 0;


$('.children li').each(function() { 
    elemWidth = $(this).outerWidth();
    if (parseInt($(this).css('width')) > maxWidth) {
        maxWidth = elemWidth;
    }
});
于 2012-06-21T22:45:19.413 回答
1 
$(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/

于 2012-06-21T22:50:39.783 回答
1

很接近！如果这是一个下拉菜单，大概是display: none默认情况下在您的 CSS 中将下拉菜单设置为，然后在父级悬停时显示？如果是这种情况，那么当元素的 display 属性为 none 时元素没有尺寸，您需要使用visibility: hidden隐藏它们并将它们设置为display: block您的默认 css，这意味着它们不会显示但仍会占用它们的空间。你的 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 );

});
于 2012-06-21T22:54:45.920 回答
0

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

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

这解决了我的问题！

于 2012-06-21T23:21:26.300 回答