我有一个问题，
我正在尝试使用 toggleClass 进行弹出式切换。但是，我还制定了一条规则，该规则是我从 StackOverflow 获得的，当在外部单击时，弹出窗口会消失。
然而，当我点击登录按钮时，它出现了，但我不能让它随着登录按钮消失了。但我已经制定了规则:
$('a#inloggen').click(function() {
$('.inloggen').toggleClass('active');
});
但是他似乎忽略了这一点......
也许你们可以发现我看不到的问题。
HTML
<div id="usermenu">
<div class="inloggen"><h2 class=" swe-editable" _sweid="17" _sweclass="nl swe swe-snippet swe-h2 ">
Inloggen</h2>
this is the popup!
<p> </p>
<p> </p>
<p>Wachtwoord vergeten? <a href="#">Klik hier</a>.</p></div>
</div>
<ul class="menu">
<li class="first"><a href="#" id="inloggen">login</a></li>
</ul>
jQuery
$('a#inloggen').click(function() {
$('.inloggen').toggleClass('active');
});
$(document).mouseup(function (e)
{
var container = $('.inloggen');
if (container.has(e.target).length === 0)
{
container.removeClass('active');
}
});
if ($('#project_user_loginform-name').hasClass('error') || $('#project_user_loginform-password').hasClass('error')) {
$('.inloggen').addClass('active');
};
我尝试了什么？
我试图向该函数添加一个异常，当在 div 外部单击时使 div 消失，但这似乎只是逆转了进度。
var container2 = $('a#inloggen');
if (container.has(e.target).length === 0 && container2.has(e.target).length !== 0)
更新:
我取得了更进一步的进展，将 mouseup 更改为 mousedown 并更改了函数的顺序。这让我更接近解决方案，但它还不能完美运行。
$(document).mousedown(function (e)
{
var container = $('.inloggen');
if (container.has(e.target).length === 0)
{
container.removeClass('active');
}
});
$('a#inloggen').click(function() {
$('.inloggen').toggleClass('active');
});
最佳答案
我相信一个更简单的方法来完成你正在尝试做的事情，就是创建一个可以切换弹出窗口的空白 div。基本上像弹出窗口一样隐藏它，单击登录链接时，掩码 div <div class="mask"></div>显示，但位于 z-index:-1; .这样页面上的链接仍然被识别为链接，但 div 仍然是可点击的。
这是新版本的代码，已实现建议的更改:link
关于javascript - 切换弹出窗口并在外部单击时切换它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14578439/