3

I have a issue,

Im trying to make a popup toggle with toggleClass. However i also made a rule that i got from StackOverflow that makes the popup dissapear when clicked outside.

However when i click the button login it appears, but i cant make it dissapear with the login button anymore. But i have set the rule :

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
});

However it seems like he is ignoring that...

Prehaps you guys can spot what the issue is that i can not see.

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



What have i tried?
I tried to add a exception to the function that makes the div dissapear when clicked outside the div but this just seems to reverse the progress.

var container2 = $('a#inloggen');
if (container.has(e.target).length === 0 && container2.has(e.target).length !== 0)

UPDATE :
I got a bit further in the progress and changed mouseup to mousedown and changed the order of the functions. This gives me a bit closer to the solution however its not working perfectly yet.

$(document).mousedown(function (e)
  {
      var container = $('.inloggen');

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

  });

  $('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

Example
http://codepen.io/anon/pen/ghpwr

4

2 回答 2

0

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

这是代码的新版本，并实施了建议的更改：链接

于 2013-01-29T12:12:45.413 回答
0

似乎以下行打破了切换，尽管我不完全确定为什么。

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

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

于 2013-01-29T08:30:32.953 回答