0

タブで構成されるメニューがあります。

このメニューを外側のクリックで閉じ、内側をクリックしてタブを開いたときにアクティブなままにしたい。

ここで解決策を見つけました

次のようになります。

$('html').click(function() {
    //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

しかし、適用するとタブをクリックできなくなるため、私の場合は機能しません。

ここに私のマークアップがあります:

<button>Open menu</button>
<div class="menu">Tabbable content here</div>
4

2 に答える 2

0

これを機能させるには、次のことを行う必要があります。

HTML

<button id= "open">Open menu</button>
<div class="menu">Tabbable content here</div>

jQuery

$(".menu").hide();
$('html').click(function() {
$(".menu").hide();
});

$('#open').click(function(event){
event.stopPropagation();
$(".menu").show();
});

ここでJsFIDDLE

于 2013-02-06T11:54:11.123 に答える
0

クリックがメニューまたはボタン内から発生したものではないことを html クリック イベントで確認し、そうでない場合は次のように閉じます。

デモ- メニューまたはボタン以外がクリックされた場合のみ非表示

ここでの利点は、クリック イベントを複数の要素にバインドする代わりにstopPropagation、ロジックを 1 つの場所に保持できることです。

さらに、クリックからバブルへのスルーに依存する機能はそのまま残ります。これは、クリックのソースを区別する必要があるフォーカスされたスコープでのみ検査するためです。

デモからのコード:

$('html').click(function(event) {
  var $menu = $(".menu");
  var $button = $("#open");

  if(event.target !== $menu[0] && event.target !== $button[0]){
    // add code here to close your menu...
    $(".menu").hide(); // or similar code
  }
});

$('#open').click(function(event) {
  $(".menu").show();
});

ほとんどの場合、他のクリックが 1 つしかない場合stopPropagationは素晴らしいですが、より詳細な制御が必要な場合は、ソースを検査する方が良い選択かもしれません.

もちろん、stopPropagation代わりにクリック イベントを他のすべての要素にバインドしても、おそらく同様に機能します。

于 2013-02-06T11:54:55.013 に答える