在jQuery中關閉菜單事件

Question

我在jQuery中有一個菜單插件。 菜單隻關閉當我點擊它的內圓...

www.tranceil.fm - >點擊耳機

我想通過點擊任何地方關閉菜單，不剛內圓

頭部代碼是在JS文件，這

<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> 

的單擊事件 - >

//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是頂級元素，因此事件永遠不會傳播從它，它們總會傳播到它。即使這樣的情況並非如此，live作品的方式，使得它處理事件，一旦他們傳播頂端

你可以做的是，在拍攝模式設置它：

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

的true最後的參數設置capturing模式下的事件偵聽器，這將導致它調用最高階祖先的事件處理程序，它將存在於文檔中。在調用該事件之後，該事件將被冒泡到目標。並且在文檔的事件處理程序中，如果我們使用一個事件（我們只會在只設置可關閉的情況下執行），那麼我們根本不傳播它。