无论您单击哪个触发器，始终关闭当前 div

Question

如何关闭当前打开的 div，当您单击它的触发器时，该触发器通常会打开 div 或任何其他触发器（在页面上打开不同的事件）？

所以基本上我有两个链接：登录和注册。当您单击注册时，登录块/div 消失，而注册 div 出现。当我点击 Login 时，Register div 隐藏并且 Login div 显示出来。

还有当我，例如单击登录，登录 div 已显示 - 登录 div 也必须隐藏。

我该如何做到这一点？我已经尝试了好几天，但不幸的是我是 jQuery 的初学者，我的 jQuery 技能目前还不是很好。我制作了以下有效的脚本。当您单击相同的触发器时，我只能隐藏/显示 div。如果您单击注册并登录，则 div 将仅显示在彼此之上，而不会隐藏。

;(function($) {
var $jq = jQuery.noConflict();
$jq.fn.login_switch = function(options) {
    var o = $jq.extend({}, $jq.fn.login_switch.defaults, options);
    var $this = $jq(this);

  $jq(this).click(function(e) 
  {  
      e.preventDefault(); 
    // hides matched elements if shown, shows if hidden 
    $jq(this).closest("div#wrapper").children("div#member_login").eq(0)[o.method](o.speed);

  });

};
$jq.fn.reg_switch = function(options) {
    var o = $jq.extend({}, $jq.fn.reg_switch.defaults, options);
    var $this = $jq(this);

  $jq(this).click(function(e) 
  {  
      e.preventDefault(); 
    // hides matched elements if shown, shows if hidden 
    $jq(this).closest("div#wrapper").children("div#member_reg").eq(0)[o.method](o.speed);
  });

};
$jq.fn.login_switch.defaults = {
    speed : "slow",
    method: "slideFadeToggle"
};
$jq("a.log-expand").login_switch();

$jq.fn.reg_switch.defaults = {
    speed : "slow",
    method: "slideFadeToggle"
};
$jq("a.reg-expand").reg_switch();


var msie = false;
if(typeof window.attachEvent != 'undefined') { msie = true; }

$jq.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() { 
    if (msie) { this.style.removeAttribute('filter'); }
    if (jQuery.isFunction(callback)) { callback(); }
  }); 
};

};
})(jQuery);

我的html是：

    <div id="member_reg" style="display:none;">
        <div class="container">
            <div class="sixteen columns">
            REGISTRATION.
            </div>
        </div>
    </div>
    <div id="member_login" style="display:none;">
        <div class="container">
            <div class="sixteen columns">
                LOGIN.
            </div>
        </div>
    </div>

使用触发按钮：

<ul class="user">
<li><a href="javascript:void(0);" class="reg-expand register">Register</a></li>
<li><a href="javascript:void(0);" class="log-expand login">Login</a></li>
</ul>

Answer 1

在这里，我为您创建了一个FIDDLE，我认为您正在尝试实现的行为。

如果您有任何问题，或者我是否离题，请告诉我。

HTML

<button id="btnLogin" data-bound="login">Login</button><button id="btnRegister" data-bound="register">Register</button>

<hr />

<div id="login" class="area" data-state="closed">
    Login div
</div>

<div id="register" class="area" data-state="closed">
    Register div
</div>

CSS

.area{
    float:left;
    width:200px;
    height:0;
    margin:10px;
    overflow:hidden;
    text-align:center;
    line-height:100px;
}
#login{
    background:#41cc36;
}
#register{
    background:#3764e3;
}

JAVASCRIPT

$(document).ready(function(){
    $('button').bind('click', function(){
        //close any open areas
        $('.area').each(function(){
            if($(this).data('state') == 'open'){
                $(this).animate({'height': 0}, 750, function(){
                    $(this).data('state', 'closed');
                });
            }
        });
        //retrieve the div we need to toggle and it's state
        var divID = $(this).data('bound'),
            div = $('#' + divID),
            state = div.data('state');
        //animate the div based on it's state, then set the new state
        if(state == 'closed'){
            div.animate({'height': 100}, 750, function(){
                div.data('state', 'open');
            });            
        }else{
            div.animate({'height': 0}, 750, function(){
                div.data('state', 'closed');
            });
        }
    });

    //init
    $('#btnLogin').trigger('click');
});