Javascript函数重叠

Question

点击一个链接时，我会发生两个函数，一个框会下降。

<div class='buttons'><a href  = '#' onclick = "return false" onmousedown =     "javascript:toggleInteractlogin('login')"class='regular' name='save'> Log In </div></a>
<div class='buttons'><a href  = '#'  onclick = "return false" onmousedown =     "javascript:toggleInteractlogin('register')" class='regular' name='save'>            Register</div></a><br><br>
<div class = "Interactlogin" id = "login"> Login</div>
<div class = "Interactlogin" id = "register"> Logina</div>

单击登录时，登录框会向下滑动，但是当单击注册框时，登录框会进一步滑动以适应注册框，而我希望一次只显示一个框。 任何帮助表示赞赏。

function toggleInteractlogin(x)
   {
   if($('#' + x).is(":hidden"))
   {
   $('#'+x).slideDown(200);
   }
   else
   {
   $('#'+x).hide();
   }
   $('Interactlogin').hide();


   }

Answer 1

确保在单击登录按钮时首先向上滑动注册框，同样确保在单击注册按钮时首先向上滑动登录按钮 所以对于loginn按钮单击

1向上滑动注册框

2然后向下滑动登录框

同样适用于注册

1向上滑动登录框

2然后向下滑动寄存器框。

尝试为登录＆amp;指定不同的ID注册按钮

function toggleInteractlogin(x)
   {
     if(x=='register')
        {
            $('#login').hide();
            $('#register').show();
        }
        else
        {
            $('#register').hide();
            $('#login').show();
        }
   }

对于show / hide，你可以指定不同的效果，如fadein / fadeout

Answer 2

我已在 LIVE DEMO - JSFiddler

中更新了解决方案

HTML

<div class='buttons'>
    <a id="btnlogin" href= '#' class='login' name='save'>Log In </a>
</div>
<div class='buttons'>
    <a id="btnregister" href='#' class='regular' name='save'>Register</a>
</div><br><br>

<div class="Interactlogin" id="login" style="display:none">Login</div>
<div class="Interactlogin" id="register" style="display:none">Logina</div>​

JS

    $('#btnlogin').click(function(){
        $('#login').show();
        $('#register').hide();
    });
    $('#btnregister').click(function(){
        $('#login').hide();
        $('#register').show();
    });    

​

Answer 3

您可以使用此修订标记对此进行简化：

<div class='buttons'><a href='#' class='login'>Log In</a></div>
<div class='buttons'><a href='#' class='register'>Register</a></div>
<br><br> 
<div class = "Interactlogin" id = "login">Login</div>
<div class = "Interactlogin" id = "register">Logina</div>

$('.login,.register').mousedown(function() {
    $('.Interactlogin').hide();//hide them all initially
    var myType = $(this).attr('class');//assumption this is the only class
    $('#' + myType).slideDown(200);
});

我假设这个CSS最初隐藏:(你的可能不同）

.Interactlogin{display:none;}