在jQuery中关闭菜单事件

Question

我在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事件 - >

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

有什么想法吗？

Answer 1

看起来你需要在点击shadow时删除pie0 div和shadow div，因为它们在被带到/返回到屏幕时会被完全生成/重新生成。

所以只需添加：

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

更新 ：我刚刚意识到：因为阴影是在用户事件之后动态添加的，而不是在documentready上存在，你需要通过将它附加到body元素来定义它，并委托点击shadow元素，如下所示：

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

Answer 2

如果要通过单击任意位置关闭它：

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

您将在此处遇到的问题是，此次点击还会导致其他点击。 例如，如果用户点击某个链接或其他内容，他将被重定向，并且菜单也将被关闭。 此外，由于document是一个顶层元素，事件绝不会传播完成从中 ，他们会一直传播到它。 即使不是这种情况， live工作的方式使得它一旦传播到顶部就处理事件

您可以做的是，将其设置为捕获模式：

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

最后的true参数将此事件侦听器设置为capturing模式，这将使其调用最高阶祖先的事件处理程序，该处理器将存在于文档中。 在调用该事件之后，该事件将被冒泡到目标。 在文档的事件处理程序中，如果我们使用一个事件（我们将仅执行它，并且仅在设置了closeable时），那么我们根本不会传播它。