Получить ширину предыдущего элемента списка и рассчитать текущее поле

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

Я решил это. Это мой код:

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

Класс «реж» являются основным список категорий предметов: <li class="dir">.

Answer 2

Это потребует большой работы на стороне сервера, потому что нет возможности узнать ширину элемента, если вы не сделаете много вычислений, например, вычислите количество символов, размер шрифта и вес, возможно, границы или поля и прокладки , в любом случае лучший способ сделать это на стороне клиента с помощью Javascript или, как вы сказали, с jQuery .
Это лучше сделать это чисто CSS W с, вот некоторые видео уроки о том, как сделать это:

• Creating a 100% CSS dropdown menu by Free Web Tutorials.
• Adam khory's video.
• PHPAcademy's video.

Надеюсь, что эта помощь.