Javascript 在禁用单击的元素中重新启用单击

我有一个面板，当点击按钮时打开，如果点击文档，我将关闭面板

我使用的代码忽略了面板元素及其内容（如果它们作为文档单击的一部分被单击）

我遇到的问题是，我在容器中有一个关闭按钮，我指定忽略它

有没有人能提供一个解决办法，让里面的按钮仍能正常工作

 UtilityBar = (function() {
    var _self = {},
        recentPanel = $('#utils_recent'),
        recentButton = $('#utils_show_recent');
    function init() {
        bindEvents();
    }
    function bindEvents() {
        recentButton.on('click', toggleRecent);
        $(document).on('click', function(event) {
            if (!$(event.target).closest('.utils').length) {
                closePanels();
            }
        });   
        // This obviously doesn't work
        $('.utils_close').on('click', closePanels);
    }
    function toggleRecent(e) {
        e.preventDefault();
        recentPanel.toggleClass('is_open');
    }
    function closePanels() {
        recentPanel.removeClass('is_open');
    }
    _self = {
        init: init
    };
    return _self;
})();
$(function() {
    UtilityBar.init();
});

---

这是一把小提琴-

我不明白你的意思。小提琴的工作原理与我期望的一样：单击“打开”打开工具栏，单击文档或再次单击“关闭”关闭文档。在您的示例中，单击“关闭”可以正常工作。