0

Web ページに「オプション」ボタンがあります。ユーザーがそのボタンをクリックすると、小さなサブメニューが表示されます。

そのメニューの外側をクリックすると、閉じます。ここまでは順調ですね。

私の問題は、(メニューが表示されているときに) オプション ボタンをもう一度クリックすると、メニューが開いたままになることです。閉じる必要があります。

「外部をクリック」機能を管理するコードは次のとおりです。

$j(document).mouseup(function(e) {
   var container = $j('.playlist-menu');

   if (container.has(e.target).length === 0) {
      container.hide();
   }
});

そして、ボタンのイベント

$j('#options').click(function() {   
    $j('.playlist-menu').toggle();
});

HTML 構造:

<button id="options" class="float-left" title="Options" type="button">
<div class="playlist-menu display-none">
   <ul>
       ...
   </ul>
</div>

オプション ボタンをもう一度クリックしても閉じない理由がわかりません。そのボタンの e.target が「playlist-menu」ではないのに、メニューが閉じないのはなぜですか??

ありがとう

4

1 に答える 1

3

これは、ボタンをクリックすると、ドキュメントにバインドされたイベント ハンドラーによってメニューが非表示になりますが、オプション ボタンのイベント ハンドラーも同様に起動されるためです。これにより、メニューがトリガーされ、その状態が切り替えられて表示されます。

これを克服するには、イベント ターゲットがオプション ボタンでもメニューの要素でもない場合に、ドキュメントにバインドされたイベント ハンドラーをチェックインします。

だから、このようなもの

$(document).mouseup(function(e) {
   var container = $('.playlist-menu');
   $target = $(e.target); 
   if (container.has( $target ).length === 0 && !$target.is('#options') ) {
       container.hide();
   }
});

それが理にかなっていることを願っています。

于 2012-11-26T16:39:30.460 に答える