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

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

我该如何解决这个问题

注意：

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

我如何避免或覆盖它。

Answer 1

这是一个经过修改的简化小提琴：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的登录/注册区域请求在页面的任何其他区域点击时隐藏，请参阅更新的小提琴：https://jsfiddle.net/cu3gdgb3/2/

jQuery：

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

Answer 2

<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='showLoginArea'>Login</span>
<span id='showRegisterArea'>Register</span>
<br>
<span id='loginArea'>This is Login Area</span>
<span id='registerArea' style='display:none'>This is Register Area</span>
</span>
</li>

您的第二个loginarea名称错误

Answer 3

正如@Antonio发表的评论，此处没有$("#showLoginArea").click(function(){ console.log('login'); $("#loginArea").show(); $("#registerArea").hide(); }); $("#showRegisterArea").click(function(){ console.log('register'); $("#loginArea").hide(); $("#registerArea").show(); });区域修复。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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='showLoginArea'>Login</span>
<span id='showRegisterArea'>Register</span>
<br>
<span id='loginArea'>This is Login Area</span>
<span id='registerArea' style='display:none'>This is Register Area</span>
</span>
</li>

{{1}}

Answer 4

您需要将事件传递给函数并停止click事件的传播或冒泡，以便登录对话框不会关闭。此外，需要更改loginArea的命名。

<script>
$("#showLoginArea").click(function(event){

    event.stopPropagation();

    $("#loginArea").show();
    $("#registerArea").hide();
});

$("#showRegisterArea").click(function(event){

    event.stopPropagation();

    $("#loginArea").hide();
    $("#registerArea").show();
});</script>

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

4 个答案: