获取上一个列表项的宽度并计算当前边距答案

【问题标题】：Get width of the previous list item and calculate current margin获取上一个列表项的宽度并计算当前边距
【发布时间】：2013-03-05 04:18:53
【问题描述】：

我正在使用 PHP 来下拉主菜单。我的菜单如下所示：

<ul class="dropdown_top">
  <li style="width:20px;">  /*main categories, width is an exapmle i don't realy know the exact width */
    <ul style="margin-left:-10px>
      <li></li>    //subcategories
      ...
    </ul>
  </li>

  <li>  //main categories
    /* the code i'm looking for, must do something like this: */
    <?php
      $style = - widthOfThePreviusMainCategoryLi() + marginLeftOfThePrevius_Ul_Li_Ul() = -30px ;
    ?>
    <ul style="margin-left:<?=$style?>;"> /* this ul margin-left is the problem */
      <li ></li>
      ...
    </ul>
  </li>
</ul>

我需要获取上一个列表项的宽度并计算当前的边距。

我看到了一个带有 jQuery 函数 outerWidth() 的示例，但我不知道如何在我的情况下使用它。

我在菜单发布后尝试了这个，但我做错了什么？

<pre><code>
    <script type=text/javascript>
        $(document).ready(function(){
            var number = $("#topmenu li").size();
            var marginSum = -10;   //the first

            for(i=2;i &lt; number; i++)
            {
                marginSum = marginSum - $("#topmenu li").slice(0,(i-1)).outerWidth(true); //OR
                marginSum = marginSum - $("#topmenu li:eq("+(i-1)+")").outerWidth(true);

                alert("Μargin of "+i+": "+marginSum + " prev width:"+$("#topmenu li:eq("+(i-1)+")").outerWidth(true)+" Margin:"+marginSum);  //OR   
                alert("Μargin of "+i+": "+marginSum + " prev width:"+$("#topmenu li").slice(0,(i-1)).outerWidth(true)+" Margin:"+marginSum);    

                // $("#topmenu li").width(width);
            }
        }); 
    </script>
</code></pre>

我相信函数outerWidth(true);也计算嵌套的ul，但我不确定。

【问题讨论】：

标签： php jquery list width margin

【解决方案1】：

这需要在服务器端进行大量工作，因为除非您进行大量计算，例如计算字符数、字体大小和粗细可能是边框或边距和填充，否则无法知道元素的宽度，无论如何~~最好的方法是在客户端使用 Javascript 或像你说的那样使用 jQuery~~。
最好用纯 CSS 来做，这里有一些关于如何做到这一点的视频教程：

希望对您有所帮助。

【讨论】：

临时，我已经通过对当前菜单使用静态数组 $style(-10, -30, ...) 解决了这个问题。但是菜单会动态变化。我怎么能用 jquery 做到这一点？
您不需要编写真正可以使用Twitter-bootstrap navbar with Dropdowns 的代码，或者只需使用不带 CSS 的 PHP 填充嵌套列表，然后使用样式表中的 CSS 通过使使用已知边距和填充固定的 lis 的宽度，您可以将右边距添加到嵌套的 ul。我知道我说你可以做到，但你真的不需要，使用纯 CSS 更容易，查看我更新的答案以获取更多详细信息。
实际上，我希望我的菜单看起来像这样 caremarket.gr/DefaultV2.aspx 。但是在我的站点中，我想解决嵌套 ul 的边距问题。我的菜单也会动态变化，所以设置固定边距只是一个临时解决方案。

【解决方案2】：

我已经解决了这个问题。这是我的代码：

<script>
    function setMenuInPlace(){
        //fix ul category menu
        $('.dropdown_top .dir').css({'margin-left' : '0'});
        var totalLis_w = num =0;
        var dtopWidth = $('#topmenu .dropdown_top').width();

        //set nested ul in place
        var mLeft = $('.dropdown_top').offset().left;
        var myLeft = mLeft + 2; //Left per 2 pixels for leaving a small space
        // alert (mLeft);
        $('.dropdown_top li ul').offset({left : myLeft});

        //calculate free space for lis
        $('.dropdown_top .dir').each(function(){
            num ++;
            totalLis_w += $(this).outerWidth(true);
            // alert($(this).outerWidth(true));
        });
        var dtop_free = dtopWidth - totalLis_w;
        var mLeft_Li = (dtop_free/ num) -2 ; //leaving a small space 2 pixels.
        if(mLeft_Li > 0)
             $('.dropdown_top .dir').css({'margin-left' : mLeft_Li});
        // alert(\"lis width\"+totalLis_w+\" free space:\"+dtop_free+\" mLeft\"+mLeft_Li);
    }
    ( function($) {
        $(document).ready(function(){
            setMenuInPlace();
        });
        //$(window).load(function(){
        // setMenuInPlace();
        //});
        $(window).resize(function() {
            setMenuInPlace();
        });
    } ) ( jQuery );
</script>

类“dir”是主要类别列表项：<li class="dir">。

【讨论】：