Jquery Popup - 如何在切换事件旁边模糊或移除

我制作了一个弹出菜单，可以在点击时切换。我想保留此功能，但也要添加单击页面内任何其他位置以删除该类的功能。Jquery Popup - 如何在切换事件旁边模糊或移除

任何帮助将不胜感激。见下面

HTML代码和演示

<div class="tree-wrapper"> 
    <div class="example-wrapper"> 
     <a href="#" class="toggle-popup">Toggle</a> 
    </div> 
    <span id="popup"> 
     <ol> 
      <li class="new-folder"><a href="#">New Folder</a></li> 
      <li class="delete"><a href="#">Delete</a></li> 
      <li><a href="#">Rename</a></li> 
      <li><a href="#">Cut</a></li> 
      <li><a href="#">Copy</a></li> 
      <li class="disabled"><a href="#">Paste</a></li> 
     </ol> 
    </span> 
</div>

var popupToggle = $(".tree-wrapper .toggle-popup"); 

$(function() { 

    popupToggle.click(function(e) { 
     var popupToggleLink = $(this); 
     e.preventDefault(); 
     popupToggleLink.toggleClass("open"); 
     popupToggleLink.closest(".tree-wrapper").find("#popup").toggleClass("open").css('left',e.pageX).css('top',e.pageY); 
    }); 

});

CSS

#popup { 
    display: none; 
} 
#popup.open { 
    display: block; 
}

来源

2013-05-31 2ne

你可以这样做：

$(document).click(function (e) { 
    // Your code here 
    if ($(e.target).closest('.tree-wrapper').length !== 0) return; 
    $(".tree-wrapper").find("#popup").removeClass("open"); 
    popupToggle.removeClass("open"); 
});

FIDDLE DEMO

来源

2013-05-31 11:31:43

你的榜样的工作，但它不容许树包装专区内去除之类的。 – 2ne

它不会从开关中删除开放类 – 2ne

@ Parallel2ne：我更新了代码。它现在从两者中删除课程。 –

的event.stopPropagation()可以用来防止事件冒泡一次点击该链接的document对象。在document对象上添加事件处理程序以隐藏弹出窗口。

此外，我已经在弹出窗口中添加了一个事件处理程序，因此您仍然可以单击弹出窗口中的链接。相同的原理popupToggle.click()

var popup = $("#popup"), 
    popupToggle = $(".tree-wrapper .toggle-popup"); 

$(function() { 
    // toggle popup but don't bubble the event to the document 
    popupToggle.click(function(e) { 
     e.stopPropagation(); 
     popup.toggleClass("open").css({ left: e.pageX, top: e.pageY}); 
    }); 

    // keep toggle open but don't bubble event to document 
    popup.click(function(e){ 
     e.stopPropagation(); 
    }); 

    // close popup when clicked on document 
    $(document).click(function(){ 
     popup.toggleClass("open", false); 
    }); 
});

DEMO：http://jsfiddle.net/tive/5fKEu/

来源

2013-05-31 11:48:59

Jquery Popup - 如何在切换事件旁边模糊或移除

回答

相关问题