1

基本的に私が達成しようとしているのは、コンテンツ div の左側に ul メニューを配置することです。最初は、li が 1 つだけ表示されます。クリックすると、スライドアウトまたは一種のアニメーションが表示され、異なるナビゲーションを含む4 つのliに置き換えられます。

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

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

これは現在それを行っていますが、入ってくる兄弟はスムーズではなく、fadOut アニメーションが終了すると、他の兄弟の代わりにジャンプします。

EDIT ドロップダウンメニューではありません。

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 に答える