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>

前のリストアイテムの幅を取得して、現在のマージンを計算する必要があります。

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と思いますが、それは確かではありません。

4

2 に答える 2

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 に答える