Question

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

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

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

目前这样做但是进入的兄弟姐妹不顺利，当fadOut动画结束时，他们跳到另一个地方，任何帮助都会受到赞赏。

修改不是下拉菜单。

Answer 1

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

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

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/ 祝你好运。

Answer 2

我遇到了同样的问题，这是我如何解决它的例子：

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

如何制作一个滑动和隐藏之前的jquery菜单？

2 个答案: