JS& jQuery函数,在点击时隐藏了一些DIV

时间:2013-12-25 16:48:16

标签: javascript jquery html

我有一个div navigation,这个div中有一个div login。当我点击{{{ 1}} div。

单击login_name_field div时会隐藏所有新显示的div(包括其自身)并显示原始login_pw_field div。这一切都像魅力一样,但我希望还有一个与register_btn相同的功能,但是通过点击主do_login_btn div之外的任何地方来触发。我尝试调整代码,但是我在新的hide_login vars上遇到未定义错误。

请查看下面的代码。谢谢大家的阅读和提前回复:)祝你度过愉快的假期。

JS

login

HTML

login

同样看来hide_login仅在我点击login div而不是在其外部时触发。我认为hide_login会照顾到这一点。好吧,让我知道你的想法:)。

1 个答案:

答案 0 :(得分:0)

根据您的建议,我现在可以使用代码了,它看起来像这样:

$( "#login_btn" ).click(function() {

    $('#login_name_field, #login_pw_field, #register_btn, #login_btn, #do_login_btn, #hide_login').toggle()

});

$( "#hide_login" ).click(function() {

    $('#login_name_field, #login_pw_field, #register_btn, #acc_rec_btn, #login_btn, #do_login_btn, #hide_login').css("display", "none")
$('#login_btn').css("display", "block");
});

    $(document).mouseup(function (e)
{
    var container = $("#navigation_bar");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $( "#hide_login" ).click();
    }
});

我还调整了hide_login功能。当我一直在navigation_bar div之外点击它时,它在新解决方案之前实现的方式一直显示和隐藏元素,而只是在它们已经显示时隐藏它们。现在它完美无缺。