3

問題があります、

ポップアップを。で切り替えようとしています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が消える関数に例外を追加しようとしましたが、これは進行を逆にするようです。

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

4

2 に答える 2

0

あなたがやろうとしていることを達成するためのより簡単な方法は、ポップアップを切り替えることができる空白のdivを作成することだと思います。基本的にはポップアップのように非表示にし、ログインリンクをクリックすると、マスクdiv<div class="mask"></div>が表示されますが、z-index:-1;。そうすれば、ページ上のリンクは引き続きリンクとして認識されますが、divは引き続きクリック可能です。

提案された変更が実装された新しいバージョンのコードは次のとおりです。link

于 2013-01-29T12:12:45.413 に答える
0

次の行がトグルを壊しているようですが、理由は完全にはわかりません。

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

私の推測では、リンクはドキュメントの一部と見なされるため、ユーザーがリンクをクリックすると、クラスが最初に削除されてから切り替えられ、クラスが再度追加されます。

于 2013-01-29T08:30:32.953 に答える