javascript - child UL 对父亲 LI 动画的奇怪行为

Question

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

嗨!查看最后一个菜单(在底部)。当您将鼠标悬停在带有“+”符号的 LI 之一上时，它有一个子 UL，它是一个子菜单，slideToggle 会显示子 UL，但是当动画结束时，它会改变宽度。

我在 chrome 上看得更清楚。

可能是什么问题？

代码如下:

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;}​

JavaScript

$(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});
                }
            );
        });​

Answer 1

发生这种情况是因为您指定了

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

所以，嵌套的 ul 也有那个填充。只需删除右边的填充并将 li.father 的大小增加 10 像素，就像这样

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

参见 http://jsfiddle.net/Z6Ueu/9/