無論點擊哪個觸發器，總是關閉當前div

Question

如何關閉當前點擊觸發器時打開div或其他觸發器（打開頁面上的其他事件）的div？

所以基本我有兩個鏈接：登錄和註冊。當您單擊註冊時，登錄塊/ div消失並且註冊div顯示。當我點擊登錄時，Register div隱藏並顯示Login div。

另外當我，例如，單擊登錄並登錄div已顯示 - 登錄div必須隱藏。

我該如何做到這一點？我嘗試了幾天，但不幸的是，我是jQuery的初學者，而且我在jQuery方面的技能目前還不是很好。我製作了以下腳本。當你點擊同一個觸發器時，我只能隱藏/顯示div。如果您點擊註冊並登錄，divs將顯示在海誓山盟之上，沒有隱藏。

;(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'); 
});