1

我制作了一个弹出菜单，可以在点击时切换。我想保留此功能，但还想添加单击页面内其他任何位置以删除类的功能。

任何帮助将非常感激。请参阅下面的代码和演示

演示

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>

JS

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;
}
4

2 回答 2

1

你可以这样做：

$(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");
});

小提琴演示

于 2013-05-31T11:31:43.763 回答
1

可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);
    });
});

演示：http: //jsfiddle.net/tive/5fKEu/

于 2013-05-31T11:48:59.933 回答