Question

我有一个问题，

我尝试使用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>&nbsp;</p>
<p>&nbsp;</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之外点击时使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');
  });

示例
http://codepen.io/anon/pen/ghpwr

Answer 1

看来以下一行是打破了切换，虽然我不完全确定原因。

if (container.has(e.target).length === 0) {
  container.removeClass('active');
}

我的猜测是该链接被视为文档的一部分，因此当用户单击该链接时，首先删除该类，然后切换，重新添加该类。

Answer 2

我相信一种更简单的方法来完成你想要做的事情，就是创建一个可以切换弹出窗口的空白div。基本上它像弹出窗口一样隐藏，当点击登录链接时，显示掩码div <div class="mask"></div>，但是z-index:-1;。这样，页面上的链接仍然被识别为链接，但div仍然是可点击的。

以下是代码的新版本，其中包含建议的更改：link

切换弹出窗口并在外部单击时切换它

2 个答案: