Jquery:ドロップダウンメニューはメニューの外をクリックしても消えません

私はjqueryを初めて使っています。私は、Googleのコードを見て「More」ボタンを作成しています。私はそれを気にしていますが、ドロップダウンを消すための唯一の方法は、もう一度[More]ボタンをクリックすることです。これを変更するために追加できるメソッドはありますか?そのため、ドロップダウンメニューの外にあるクリックはすべて閉じます。洞察に感謝します!

http://jsfiddle.net/rKaPN/1/

4

4 答え

クリックイベントをhtmlにバインドしてクリックをキャプチャし、メニューを非表示にする

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

Then override that on your menu's click event using .stopPropagation();

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();

Fiddle: http://jsfiddle.net/rKaPN/12/

7
追加された
非常に良い解決策ではありません。それぞれのクリックで、メニューが既に隠されているときに毎回不必要な作業がたくさん行われるからです
追加された 著者 Rajat Gupta,
ありがとう、助けに感謝する
追加された 著者 trying_hal9000,

これを追加することもできますので、ユーザーはクリックする必要はありません

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})
1
追加された
素敵な私はこれもたくさん好きだ、defはこのincaseを維持するだろう私は道を必要とする
追加された 著者 trying_hal9000,

メニューを開いたら、ウィンドウの幅と高さが同じ透明なオーバーレイdivを作成します。そのdivをクリックすると、メニューが閉じてdivが破棄されます。

0
追加された

html dom要素のすべてのクリックをテストするのではなく、特定のメニュー項目にブラーイベントをバインドしてアクティブにし、ブラーイベントが発生したときにそれをオフにすることができます。これらの数行を置き換えます:

  //displaying the drop down menu
  $(this).parent().parent().find('.active').removeClass('active');
  $(this).parent().addClass('active');

これらと:

  //displaying the drop down menu
  $('.active').removeClass('active');
  $(this).parent().addClass('active');
  $(this).blur(function() {
      $('.active').removeClass('active');
  });
0
追加された