0

http://jsfiddle.net/RedKnight91/Z6Ueu/4/

やあ！最後のメニュー (一番下) を見てください。サブメニューである子 UL を持つ "+" 記号の付いた LI の 1 つにカーソルを合わせると、slideToggle は子 UL を表示しますが、アニメーションが終了すると幅が変わります。

クロムの方がよく見えます。

問題は何でしょうか？

コードは次のとおりです。

HTML

<ul class="vertical extend color">
        <li class="father">Uova
            <ul>
                <li>Fresche</li>
                <li>Di terra</li>
                <li>Artificiali</li>
            </ul>
        </li>
        <li>burro</li>
        <li class="father">zuppa
            <ul>
                <li>di legumi</li>
                <li>di ceci</li>
                <li>di fagioli</li>
                <li>fredda</li>
                <li>calda</li>
            </ul>
        </li>
        <li>limone</li>
        <li>Acqua</li>
    </ul>

CSS

ul{ padding:0; margin: 0; list-style-type: none; font-family: sans-serif; font-weight:bold; }

        li{ background: #EEE; box-shadow: 0 1px 10px #777; padding:5px; margin:0; width:150px; cursor: pointer; text-align: center; text-shadow: 1px 2px 0 white; position: relative; }
        li:hover{ background-color:#333; color:white; text-shadow: 1px 2px 0 black; }

        ul.horizontal{ display: inline; }
        ul.horizontal li { display:inline-block; zoom: 1; *display:inline; }

        ul.vertical li { margin:1px; }

        ul.extend > li:hover { background-color: #EEE; }

        li.father { padding: 5px 10px 0 0; }
        li.father ul { margin-left: -1px; display: none; padding: 0; }
        li.father:hover li { background-color:#EEE; color: #AAA; text-shadow: 1px 2px 0 white; }
        li.father:before { content: "+"; color: #555;}
        li.father:hover:before { content: "-"; color: #FFF;}​

ジャバスクリプト

$(function(){

            $("li.father").hover(
                function(){
                    $(this).find("ul").stop().slideToggle(400);
                },
                function(){
                    $(this).find("ul").stop().slideToggle(400);
                }
            );

            $("ul.extend li").not(".father").hover(
                function(){
                    $(this).animate({width:"170"}, {duration:200, queue:false});
                },
                function(){
                    $(this).animate({width: "150"}, {duration:500, easing: "easeOutBounce", queue:false});
                }
            );

            $("ul.color li").hover(
                function(){
                    $(this).animate({backgroundColor: "#333"}, {duration:100, queue:false});
                },
                function(){
                    $(this).animate({backgroundColor: "#EEE"}, {duration:100, queue:false});
                }
            );
        });​
4

1 に答える 1

0

これは、指定したために発生します

li.father { padding: 5px 10px 0 0; }

そのため、ネストされた ul にもそのパディングがあります。次のように、右のパディングを削除して、サイズを li.father10 ピクセルずつ増やします。

li.father { padding: 5px 0 0 0; width: 160px; }

http://jsfiddle.net/Z6Ueu/9/を参照

于 2012-05-09T10:19:18.393 に答える