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

Я обновил решение в 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 2

Вы можете немного упростить это, используя эту пересмотренную разметку:

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

Answer 3

убедитесь, что вы сначала сдвигаете окно регистрации при нажатии кнопки входа, аналогично убедитесь, что вы сначала сдвигаете кнопку входа вверх при нажатии кнопки регистрации, чтобы при нажатии кнопки входа в систему

1 сдвигайте регистр вверхbox

2, затем сдвиньте вниз окно входа в систему

аналогично для регистра

1, сдвиньте вверх поле входа в систему

2, затем сдвиньте вниз поле регистрации.

попробуйте указать разные идентификаторы для кнопки входа и регистрации

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

для отображения / скрытия вы можете указать другой эффект, например, fadein / fadeout