0

メニューポップアップを切り替えるボタンがあります。メニューの外側をクリックするとメニューを非表示にすることができましたが、ボタンの切り替えが機能しません。ボタンをもう一度クリックすると、メニューが表示されたままになります。ボタンを切り替えた場合、またはコンテナをクリックした場合にメニューを非表示にするにはどうすればよいですか?

jsFiddle: http://jsfiddle.net/PPcfN/

$('.quicklinks-rollover').click(function () {
    $('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
    var container = $(".quicklinks");
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});
4

4 に答える 4

1

mouseup 関数は、ボタンのクリック (quicklinks-rollover) を処理する必要があります。ここですべてを修正した場合: http://jsfiddle.net/8VUnq/1/

$(document).mouseup(function (e) {
    var popup = $('#quickLinksPopup'),
        button = $('#quickLinksToggle');
    if (popup.is(':visible')
        && !popup.is(e.target)
        && !button.is(e.target)
        && popup.has(e.target).length === 0
        && button.has(e.target).length === 0) {
        popup.toggle();
    }
});

次の 2 つの点に注意してください。

  1. ID を使用してアイテムをより迅速に参照し、複数のポップアップの競合を防ぎます
  2. イベントが非常に頻繁にトリガーされるため、ページ全体でマウスイベントを使用することはお勧めしません。ポップアップに閉じるボタンを追加するなどの代替方法を使用するか、より効果的にするには、ショーにマウスアップリスナーを追加することを検討してください。ポップアップの非表示で削除します。

ポップアップの状態は、$(popup).is(':visible') または is(':hidden') で判断できます。

于 2013-07-16T13:46:54.517 に答える
0

この通常の非表示と表示方法を実行できます。ほとんどの場合 toggle() 関数が適切に機能しないため...

デフォルトで属性 p="closed" を使用して HTML ボタンを配置します。

      <button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>

Jquery を変更します。

         $('.quicklinks-rollover').click(function () {
             var a = $(this).attr("p");
             var container = $(".quicklinks");
             if(a=="closed"){
              container.show();
              $(this).attr("p","open");
            }else{
              container.hide();
              $(this).attr("p","closed");
            }
       });
     $(document).mouseup(function (e) {
       var container = $(".quicklinks");
       if (container.has(e.target).length === 0) {
           container.hide();
       }
     });
于 2013-07-16T13:12:27.170 に答える
0

試す ：

var $quicklinks = $('.quicklinks');
var msOverLinks = false;

$('.quicklinks-rollover').click(function () {
    $quicklinks.toggle();
});

$quicklinks.mouseenter(function() {
    msOverLinks = true;
}).mouseleave(function() {
    msOverLinks = false;
});

$(document).mouseup(function (e) {
    if( ! msOverLinks ) {
        $quicklinks.toggle();
    }
});
于 2013-07-16T13:04:34.773 に答える
0

この動作の理由は、div でmouseup()を実行するとバインドされます。イベントにメッセージをclick()追加することで、この動作を確認できます。console.log.mouseup

代わりに、以下のようにしてみてください。 

$('.quicklinks-rollover').on('click', function (e) {
    $('.quicklinks').toggle();
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    var container = $(".quicklinks");
    console.log(container.has(e.target).length);
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

働くフィドル

于 2013-07-16T13:41:46.703 に答える