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

看起来您需要在单击阴影时删除pie0div 和shadowdiv ，因为每当它们被打开/返回到屏幕时，它们就会完全生成/重新生成。

所以只需添加这个：

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

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

$('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模式，这将导致它调用存在的最高级别祖先的事件处理程序，该处理程序将用于文档。调用该事件后，该事件会冒泡到目标。并且在文档的事件处理程序中，如果我们使用一个事件（我们只会在设置了可关闭的情况下才这样做），那么我们根本不会传播它。

于 2012-08-06T10:50:21.783 回答