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

当您单击当前打开的div的触发器（用于打开div）或任何其他触发器（用于打开页面上的其他事件）时，如何关闭当前打开的div

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

此外，当我（例如）单击Login并且Login div已经显示时，Login div也必须隐藏

我如何做到这一点？我已经尝试了好几天了，但不幸的是，我是jQuery的初学者，目前我在jQuery方面的技能还不是很好。我制作了下面的脚本。我只能在单击同一触发器时隐藏/显示div。如果单击Register并登录，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>

在这里，我为您创造了一个新的机会，我认为您正在努力实现这一行为

如果你有任何问题或者我有点不对劲，请告诉我

HTML

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

和按钮分享你的

HTML

吗？你在jquery中签出了toggle（）方法了吗？您可以很容易地使用它来实现显示/隐藏元素。您这里所拥有的是overkillzgood，正如我所说的，我不是jQuery方面的专家。我只是从它开始。那么，我怎样才能在不太过分的情况下做得不同呢？我可以为你做一把小提琴。对不起，我不是想当一个混蛋，但我知道我的感受是这样的。非常感谢你的回答，这正是我想要达到的。我注意到的第一件事是你的方法和我的大不相同。如果我可以问的话，这是为什么？为什么不尝试使用jQuery的toggle（）实现呢？而且我以前从未在HTML中尝试过数据绑定和数据状态。是HTML5吗？顺便说一句，页面加载后所有容器现在都关闭了。如何显示，即#登录为已打开的默认容器？实际上，没有正确或错误的方法，只有大量不同的方法来编写相同的代码lol。在您的方法中，您正在使用

fn

为jQuery创建一个类似于

原型的插件。。。看见而我只是直接将点击事件附加到页面加载的按钮上。您的方法较长，但使代码可在不同页面上重复使用。您甚至可以将两者结合起来，使用我的代码方法制作jQuery插件。最好的方法通常取决于项目和您喜欢的内容。如果您想淡入淡出div，可以使用
toggle（）
，但我正在设置高度动画（只是因为我喜欢它的外观），因此
toggle（）
对我来说不起作用。
数据是一件事，也是一件事。基本上，您可以在HTML中创建任何自定义属性（如data myproperty或data foo），然后通过jQuery访问该值，如下所示：
$（'someDiv'）.data（'foo'）
或设置值：
$（'#someDiv'）。数据（'foo'，'newvalue'）。如果您愿意，您也可以使用全局javascript变量来存储值，我只是认为这种
数据
方法更干净。我已经更新了这个答案，包括一个初始的
btnLogin
单击，以便在页面首次加载时打开您的登录div。
.area{
    float:left;
    width:200px;
    height:0;
    margin:10px;
    overflow:hidden;
    text-align:center;
    line-height:100px;
}
#login{
    background:#41cc36;
}
#register{
    background:#3764e3;
}

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