0

我正在使用 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>

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

我看到了一个带有 jQ​​uery 函数的示例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，但我不确定。

4

2 回答 2

0

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

希望这有帮助。

于 2013-03-16T13:40:34.383 回答
0

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

<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">.

于 2014-10-20T18:51:23.620 回答