Question

我很遗憾不是最好的Jquery程序员，但我想我会尝试一下，看看我能想出什么。它有效，但我不认为这是完成我所追求的最佳方式。

HTML MARKUP：

<ul class="top-menu">
<li><a href="#" class="drop">Sign In</a>
    <div id="panel_1" class="panel left">
    CONTENT 1
    </div>
</li>
<li><a href="#" class="drop">Register</a>
    <div id="panel_2" class="panel left">
    CONTENT 2
    </div>
</li>

JQuery代码：

$(document).ready(function () {
        var visId = null;
        $(".top-menu li a.drop").click(function () {

            var parent = $(this).parent();
            var panel = $(parent).find("div.panel");
            if ($(visId) != null && $(visId).is(":visible")) {
                if ($(visId).attr("id") != $(panel).attr("id")) {
                    $(visId).slideUp("fast");
                }
            }

            $(panel).slideDown(function () {
                $(this).slideDown();
                visId = $(this);
            });
        });

    });

Answer 1

我会这样做：

<强>代码

$( function()
{
    var top_menu = $( 'ul.top-menu' ),
        panels = top_menu.find( 'div.panel' );

    top_menu.find( 'a.drop' ).click( function( e )
    {
        var target_panel = $( this ).parent().find( 'div.panel:hidden' );

        if( target_panel.length )
        {
            panels.filter( ':visible' ).slideUp( 'fast' );
            target_panel.slideDown();
        }

        e.preventDefault();
    } );
} );

现场演示：

http://jsfiddle.net/JAAulde/8HZzh/

Answer 2

$(document).ready(function () {
        $(".top-menu li a.drop").click(function () {
            var panel = $(this).parent().find("div.panel");
            $('.top-menu li div.panel').slideUp("fast");
            $(panel).slideDown();
        });

    });

这可以帮助

Answer 3

你打赌

http://jsfiddle.net/xPTNS/

.panel
{
    display:none;
}

$(document).ready(function () {
    $(".panel:first").toggle();
    $(".top-menu li a.drop").click(function () {
        $(".panel").slideToggle();
    });
});

更好地解决多个项目

$(document).ready(function () {
    $(".panel:first").show();
    $(".top-menu li a.drop").click(function () {
        $(".panel").slideUp();
        $(this).siblings().slideDown();
    });
});

Answer 4

您可以尝试：

$(".top-menu li a.drop").click(function () {
    var panel = $(this).next();
    if($(panel).not(":visible")){
        $(".panel").each(function(){
            if($(this).is(":visible"))
                $(this).slideUp("slow");
        });
        $(panel).slideDown("slow");
     }
});

虽然我觉得有一种更有效的方式。

Answer 5

在许多地方的代码中，您将jQuery对象包装到$()中，这不是必需的，因为它已经是jQuery对象。

$(document).ready(function () {
    var visId = null;
    $(".top-menu li a.drop").click(function () {
        var $this = $(this);
        var parent = $this.parent();
        var panel = parent.find("div.panel");
        $this
        .closest('.top-menu')
        .find('div.panel:not(#'+$this.next().attr('id')+')')
        .slideUp("fast", function(){
          panel.slideDown();
        });
        return false;
    }).eq(0).click();
});

有没有更有效的方法来执行此操作。（显示隐藏分区/隐藏以前显示的Div）？

5 个答案: