Question

我正在使用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，但我肯定不知道。

Answer 1

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

希望得到这个帮助。

Answer 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">。

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

2 个答案: