Question

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

嗨！看看最后一个菜单（在底部）。当您将一个带有“+”符号的LI悬停在具有子级UL（即子菜单）的LI上时，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/

父亲李的动画中儿童UL的奇怪行为

1 个答案: