Question

单击画布时如何关闭此抽屉？此外，因为抽屉本身在画布上，当抽屉打开时它会点击抽屉吗？那是不可取的。任何帮助都会很棒，谢谢！

$(function(){
    $('.toggle-nav').click(function(){
        toggleNav();
        });
    });
function toggleNav(){
    if ($('#site-wrapper').hasClass('show-nav')){
        // nav-close functions
        $('#site-wrapper').removeClass('show-nav');
    } else{
        // nav-open functions
        $('#site-wrapper').addClass('show-nav');
        }
    }

http://jsfiddle.net/8s42f/

Answer 1

这应该可以解决问题：

http://jsfiddle.net/8s42f/3/

更新了JS：

$(function () {
    var $wrapper = $('#site-wrapper');
    function toggleNav (event) {
        $wrapper.toggleClass('show-nav');
        event.stopPropagation();
    }
    function hideNav (event) {
        if (!$(event.target).is('#site-menu, #site-menu *'))
            $wrapper.removeClass('show-nav');
    }
    $('.toggle-nav').click(toggleNav);
    $('#site-wrapper').click(hideNav);
});

我做了以下更改：

使用缓存变量#site-wrapper

$wrapper

用jQuery toggleNav()方法取代$.fn.toggleClass()逻辑
使用event.stopPropagation()阻止.toggle-nav次点击触发$wrapper事件
添加了hideNav()方法并将其绑定到$wrapper
在hideNav()内添加了检查，以防止导航中的点击被捕获。

希望这有帮助！

Answer 2

假设： - canvas =文档 - drawer =＃site-wrapper

在document上设置点击处理程序。如果点击#site-wrapper或其子项以外的任何内容，则＆＃34;抽屉＆＃34;将被关闭。

$(function () {
    $(document).on('click', function (e) {
        if (e.target.id === 'site-wrapper' || $(e.target).closest('#site-wrapper').length) {
            e.stopPropagation();
            if (! $('#site-wrapper').hasClass('show-nav')) {
                toggleNav();
            }
        } else if ($('#site-wrapper').hasClass('show-nav')) {
            toggleNav();
        }
    });
});

function toggleNav() {
    $('#site-wrapper').toggleClass('show-nav');
}

演示：http://jsfiddle.net/rodgolpe/8s42f/5/

JQuery：将click功能添加到现有切换

2 个答案: