javascript - jQuery 中有效的下拉登录框

Question

首先我发现了这个Simple and effective dropdown login box

我升级了唱歌盒。

现在我有登录和唱歌下拉框，但我有问题

当我单击“登录”(激活)，然后单击“注册”(激活第二个框)时，登录框不会打开(未停用)，现在打开(激活)2个框

如果激活其中一个，我需要停用第二个。

这是 jQuery 代码(复制过去)

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

    if ($(this).hasClass('active')) 
      $(this).find('span').html('▲')
    else 
      $(this).find('span').html('▼')
  });

  $('#registr-trigger').click(function(){
    $(this).next('#registr-content').slideToggle();
    $(this).toggleClass('active');                  

    if ($(this).hasClass('active')) 
      $(this).find('span').html('▲')
    else 
      $(this).find('span').html('▼')
  });
});

感谢并抱歉我的英语

这里是它现在如何工作的示例 http://jsfiddle.net/ZcVCK/2/

Answer 1

这里 Fiddle

/*----------------------------------------------------------------------------*/
    $('#login-trigger').click(function () {
        $('#registr-content').slideUp();
        if ($('#registr-content').hasClass('active')) {
            $('#registr-content').find('span').html('▲');
        } else {
            $('#registr-content').find('span').html('▼');
        }
        $(this).next('#login-content').slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $(this).find('span').html('▲');
        } else {
            $(this).find('span').html('▼');
        }
    });
    /*----------------------------------------------------------------------------*/
    $('#registr-trigger').click(function () {

        if ($('#login-content').hasClass('active')) {
            $('#login-content').find('span').html('▲');
        } else {
            $('#login-content').find('span').html('▼');
        }
        $('#login-content').slideUp();

        $(this).next('#registr-content').slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $(this).find('span').html('▲');
        } else {
            $(this).find('span').html('▼');
        }
    });