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

Jquery Bootstrap show and hide span on click

本文关键字：隐藏 显示 Bootstrap 单击 Jquery      更新时间：2023-09-26

这是我在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"。

我如何修复这个

注：

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

如何避免或覆盖它。

这是一个经过修订、简化的小提琴：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();
    }
});

正如@Antonio的评论所提到的，这里没有loginArea区域修复此问题。

$("#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>

您需要将事件传递给函数，并停止点击事件的传播或冒泡，这样登录对话框就不会关闭。此外，需要更改登录区域的名称。

<script>
$("#showLoginArea").click(function(event){
    event.stopPropagation();
    $("#loginArea").show();
    $("#registerArea").hide();
});
$("#showRegisterArea").click(function(event){
    event.stopPropagation();
    $("#loginArea").hide();
    $("#registerArea").show();
});</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>

您的第二个loginrea被错误地命名为

相关文章：