0

jQueryにメニュープラグインがあります。内側の円をクリックするだけでメニューが閉じます...

www.tranceil.fm -> ヘッドフォンをクリック

内側の円だけでなく、どこをクリックしてもメニューを閉じたい

ヘッダーコードはこれ

<script type="text/javascript">
            jQuery(document).ready(function(){


                var pieMenu = jQuery('#promo').pieMenu({icon : [
                        { 
                            path : "/wp-content/themes/Tersus/images/piemenu/winamp.png",
                            alt  : "Winamp",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
                        },  { 
                            path : "/wp-content/themes/Tersus/images/piemenu/vlc.png",
                            alt  : "VLC Media Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}  
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/QuickTime.png",
                            alt  : "Quick Time Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.qtl';return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/WMP.png",
                            alt  : "Windows Media Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.asx';return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/popup.png",
                            alt  : "נגן Popup",
                            fn   : function(){jQuery("#popupplay").click();return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/iTunes.png",
                            alt  : "iTunes",
                            fn   : function(){alert('...בקרוב');return false}
                        }],
                    beforeMenuOpen: function(){
                        jQuery('<div id="shadow"></div>').css(
                        {
                            'position':'fixed',
                            'background-color':'#000000',
                            'opacity': 0.6,
                            'width':'100%',
                            'height':'100%',
                            'z-index' :999,
                            'top':0,
                            'left':0
                        }).appendTo('body');
                    },
                    beforeMenuClose: function(){
                        jQuery('#shadow').remove();
                    }
                });

                jQuery('#promo').click(function(){
                if(jQuery('#'+pieMenu.id).css('display') != 'block') //if jpie is not visible
                pieMenu.initMenu(760,150);

                })
            });

        </script>

JS ファイルのクリック イベント ->

//click event
            jQuery('#'+idCore).live({
                click: function() {
                    if(closable)
                        removeMenu();
                },
                contextmenu:function(e){
                    e.preventDefault(); 
                }
            })

何かご意見は？

4

2 に答える 2

1

pie0影がクリックされたときにdiv と divを削除する必要があるように見えshadowます。これは、それらが画面に表示されたり戻ったりするたびに完全に生成/再生成されるためです。

したがって、これを追加するだけです：

$('#shadow').on('click', function(event){
    $('#pie0').remove();
    $(this).remove();
});

更新: 私はちょうど気づいた: シャドウはユーザー イベントの後に動的に追加され、documentready には存在しないため、body 要素にアタッチし、次のようにシャドウ要素のクリックに委譲して定義する必要があります。

$('body').on('click', 'shadow', function(event){
    $('#pie0').remove();
    $(this).remove();
});
于 2012-08-06T10:47:38.637 に答える
1

任意の場所をクリックして閉じたい場合:

$(document).live({
    ....
});

ここで直面する問題は、このクリックによって他のクリックも発生することです。たとえば、ユーザーが何らかのリンクまたは何かをクリックすると、リダイレクトされ、メニューも閉じられます。さらに、documentは最上位の要素であるため、イベントはそれから伝播することはなく、常にそこに伝播します。そうでない場合でも、liveイベントがトップに伝播されたら処理するように動作します

あなたができることは、キャプチャモードで設定することです：

document.addEventListener('click', function(event) {
    if(closeable) {
        removeMenu();
        event.stopPropogation();
    }
}, true);

最後のtrueパラメーターは、このイベント リスナーをcapturingモードに設定します。これにより、最上位の祖先のイベント ハンドラーが呼び出されます。このイベント ハンドラーはドキュメントに存在します。そのイベントを呼び出した後、イベントはターゲットにバブリングされます。ドキュメントのイベント ハンドラー内で、イベントを消費する場合 (closeable が設定されている場合にのみ実行します)、それをまったく伝達しません。

于 2012-08-06T10:50:21.783 に答える