Question

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

所以我基本上有两个链接：登录和注册。单击“注册”时，“登录”块/ div将消失，并显示“注册”div。当我点击登录时，寄存器div隐藏，登录div出现。

当我，例如单击Login并显示Login div - Login 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');
});

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

1 个答案: