这是我的 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
跨越整个菜单会被隐藏。
我该如何解决这个问题
注意:
当我单击寄存器时,会显示寄存器区域,但弹出窗口会隐藏,再次单击弹出窗口时,会显示寄存器区域。
我怎样才能避免或覆盖它。
最佳答案
这是一个修改后的简化 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();
}
});
关于javascript - Jquery Bootstrap 在点击时显示和隐藏跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34723488/