javascript - Jquery Bootstrap 在点击时显示和隐藏跨度

Question

这是我的 HTML 下拉列表

<li class="dropdown profile-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Login</span> <b class="caret"></b>
</a>
<span class="dropdown-menu dropdown-menu-right" id='topArea'>
<span id='LoginArea'>Login</span>
<span id='RegisterArea'>Register</span>
<br>
<span id='login'>This is Login Area</span>
<span id='register' style='display:none'>This is Register Area</span>
</span>
</li>

这是我用来显示和隐藏登录和注册区域的 Jquery

$("#showLoginArea").click(function(){
    console.log('login');
    $("#login").show();
    $("#register").hide();
});

$("#showRegisterArea").click(function(){
    console.log('register');
    $("#login").hide();
    $("#register").show();
});

但是当我使用 data-toggle="dropdown" 时，单击 showRegisterArea 跨越整个菜单会被隐藏。

我该如何解决这个问题

注意:

当我单击寄存器时，会显示寄存器区域，但弹出窗口会隐藏，再次单击弹出窗口时，会显示寄存器区域。

我怎样才能避免或覆盖它。

Answer 1

这是一个修改后的简化 fiddle :https://jsfiddle.net/cu3gdgb3/1/

HTML:

<li class="dropdown profile-dropdown">

<span class="dropdown-menu dropdown-menu-right" id='topArea'>
<span id='showLoginArea'>Login</span>
<span id='showRegisterArea'>Register</span>
<br>
<span id='loginArea'>This is Login Area</span>
<span id='registerArea'>This is Register Area</span>
</span>
</li>

jQuery:

$("#loginArea").hide();
$("#registerArea").hide();
$("#showLoginArea").click(function(){
    console.log('login');
    $("#loginArea").toggle();
    $("#registerArea").hide();
});

$("#showRegisterArea").click(function(){
    console.log('register');
    $("#loginArea").hide();
    $("#registerArea").toggle();
});

您错误地引用了 <div>是你想要切换的。

编辑 - OP 请求在单击页面的任何其他区域时隐藏登录/注册区域，请参阅更新的 fiddle :https://jsfiddle.net/cu3gdgb3/2/

jQuery:

$(document).on('click', function (e) {
    if ($(e.target).closest("#topArea").length === 0) {
        $("#loginArea").hide();
        $("#registerArea").hide();
    }
});