1

基本上我想要实现的是在我的内容 div 的左侧有一个 ul 菜单，一开始只有一个 li 应该是可见的。单击后，它必须滑出或某种动画，并被包含不同导航的 4 li替换

(function($){
    $(function(){

        $('li.dropdown').click(function() {
            $(this).fadeOut('slow')
                    .siblings('li.stage2').css('display', 'block');
        });
    });
})(jQuery);

这目前可以做到，但兄弟姐妹进来并不顺利，当 fadOut 动画结束时，他们会跳到另一个位置，任何帮助将不胜感激。

编辑 不是下拉菜单。

4

2 回答 2

2

请看一下这段代码。我构建了你的代码片段并想出了这个。

CSS：

ul { width: 200px; margin: 20px 0 0 20px; }
li { color: #fff; text-align: center; background-color: #000; border-bottom: 1px dotted #fff; }
li.stage2 { background-color: #0000ff; display: none; }

​</p>

HTML：

<ul id="menu">
    <li class="dropdown">First Stage Menu</li>
    <li class="stage2">Second Stage - 1</li>
    <li class="stage2">Second Stage - 2</li>
    <li class="stage2">Second Stage - 3</li>
    <li class="stage2">Second Stage - 4</li>
</ul>

JS：

$(document).ready(function() {
    $('li.dropdown').click(function() {
        $(this).animate({opacity:0},1000);
        $(this).siblings('li.stage2').fadeIn(1000);
        $(this).parent().animate({marginTop: '-=20'},1000);
    });​
});

在这里查看它的实际效果：http: //jsfiddle.net/P9TQA/1/ 祝你好运。

于 2012-06-18T10:56:26.527 回答
0

我有同样的问题，这是我如何解决它的示例：

$("#menu-balticpoint li").mouseover(function() {

                var id = $(this).attr('id');
                var width = $("#"+id+" a").width();
                $("#"+id+" ul li a").css("width", width+"px");
                $("#"+id+" ul").slideDown('fast').show();
        $(this).hover(function() {
        }, function(){
            $("#"+id+" ul").fadeOut('slow').hide().stop(true, true); //When the mouse hovers out of the subnav, move it back up
        });
        });
于 2012-06-18T10:13:31.733 回答