Question

我在jQuery中有一个菜单插件。仅当我点击它的内圈时，菜单才会关闭...

www.tranceil.fm - ＆gt;点击耳机

我想通过点击任意位置来关闭菜单，而不仅仅是内圈

标题代码是这个

<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事件 - ＆gt;

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

有什么想法吗？

Answer 1

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

所以只需添加：

<击>

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

<击>

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

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

Answer 2

如果您想通过点击任意位置关闭它：

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

您将在此处遇到的问题是，此次点击还会导致其他点击。例如，如果用户点击某个链接或其他内容，他将被重定向，并且菜单也将被关闭。此外，由于document是顶级元素，因此事件永远不会传播 FROM ，它们将始终传播 TO 。即使不是这种情况，live的工作方式也会在事件传播到顶部后处理事件

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

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

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

在jQuery中关闭菜单事件

2 个答案: