Question

大师，

我正在尝试在导航栏中同时登录和注册。当我只有登录脚本时，jquery按预期工作（单击显示，隐藏点击，隐藏点击屏幕上的任何其他位置）。

当我复制注册脚本时，show，hide on click不能正常工作。我创造了一个小提琴http://jsfiddle.net/jsplayground/V63DG/。请帮忙看看这个。我相信问题在于jquery。下面的代码非常适合登录。

$(document).ready(function(){
$('#login-trigger').click(function(){
    $(this).next('#login-content').toggle();
    $(this).toggleClass('active');                  
    return false;
});

$('#login-content').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#login-content').hide();
    $(this).removeClass('active');
}); 
});

Answer 1

怎么样：JSfiddle Demo它是你的小提琴我只是用更可靠的方法更新它。

我使用的jQuery代码：

$(document).ready(function(){

$('#signup-trigger').click(function(){
    if($('#login-content').is(":visible")) //check if second box is visible
        $('#login-content').slideUp(function(){ //if it is hide it and remove active class
            if($('#signup-content').is(":visible")) //after hiding finished - display selected
                $('#signup-content').slideUp().removeClass('active');
            else
               $('#signup-content').slideDown().addClass('active');            
                }).removeClass('active');
    else
        if($('#signup-content').is(":visible")) // if selected box is visible
            $('#signup-content').slideUp().removeClass('active'); // hide it
        else
           $('#signup-content').slideDown().addClass('active'); //show it 
    return false;
});

$('#login-trigger').click(function(){
    if($('#signup-content').is(":visible")) 
        $('#signup-content').slideUp(function(){
            if($('#login-content').is(":visible"))
                $('#login-content').slideUp().removeClass('active');
            else
               $('#login-content').slideDown().addClass('active');           
        }).removeClass('active');
    else
        if($('#login-content').is(":visible"))
            $('#login-content').slideUp().removeClass('active');
        else
           $('#login-content').slideDown().addClass('active');
    return false;
});

$(document).click(function(){ //hiding boxes when clicking outside
    $('#login-content').slideUp().removeClass('active');
    $('#signup-content').slideUp().removeClass('active');
});
$('#signup-content').click(function(e) { //do something when button clicked 
    e.stopPropagation();
});

$('#login-content').click(function(e) {
    e.stopPropagation();
});

});

如果你preffer hide（）和show（） - ＆gt;将 slideUp 替换为隐藏，将 slideDown 替换为 show 或者您也可以使用淡入和淡出淡出 ......

玩得开心

Login-Signup-Navbar Jquery运行不正常

1 个答案: