javascript - 响应式侧边栏选项卡和点击事件切换

Question

我有一个侧边栏可以转换为适用于较小屏幕尺寸的选项卡。这主要是通过 css 完成的，使用 JavaScript 来打开和关闭选项卡。当选项卡打开时，我已经这样做了，以便用户可以单击屏幕上的任意位置来关闭它。

我的 resize() 函数会将选项卡转换回侧边栏，但是，如果用户单击较小尺寸的选项卡，然后放大他们的浏览器，单击屏幕上的任意位置将使侧边栏消失。

基本上，我需要做的就是删除我在这里设置的 onclick，比如

if($(window).width() > 751
{
    {remove the event set up in $(document).click(function(e)}
}  

我试过使用 jQuery“.off”函数；停止传播 - 似乎没有任何效果。即使使用正确的语法，我也不确定 .off 是否可以解决问题。我认为，可以关闭任何事件点击，当然，我不想这样做。当屏幕尺寸调整到大于 751 时，一切只需要恢复正常即可。

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#SideTab').click(function()
        {
            // Actual width is 340, allowing for tab (#SideTab) to show
            // Toggle Sidebar open or closed   
            if($('#Sidebar1').css('margin-left') != '-300px')
            {
                $('#Sidebar1').css('margin-left', '-300px');
            }
            else
            {
                // At 0px, Sidebar is showing
                // Event handler allows for Sidebar to close when item on
                // Sidebar is clicked, as well as anywhere outside of
                // Sidebar.
                $('#Sidebar1').css('margin-left', '0px');
                $(document).click(function(e)
                {
                    if(!($(e.target).is("#Sidebar1") || $(e.target).closest("#Sidebar1").length) || $(e.target).is(".cbp-filter-item"))
                    {
                        // Hide Sidebar
                        $('#Sidebar1').css('margin-left', '-300px');
                    }
                });
            }
        });
        $(window).resize(function()
        {
            if($(window).width() > 751)
            {
                $('#Sidebar1').css('margin-left', '0px'); // Show Sidebar
            }
            else
            {
                $('#Sidebar1').css('margin-left', '-300px'); // Hide Sidebar
            }
        }).resize();
    });
</script>

重申一下，这段代码在任何屏幕尺寸下都能正常工作。当用户在较小的屏幕尺寸上单击选项卡，然后将屏幕尺寸调整到侧边栏处于事件状态(左边距:0)时，就会出现问题。在这种情况下，单击屏幕上的任意位置将使侧边栏消失。当屏幕尺寸 > 751 时，侧边栏应始终显示。

Answer 1

这很简单。不知道为什么坐在这里没有 1 个响应。 (虽然现在看来，答案已经很明显了。) 简单地改变了行

if(!($(e.target).is("#Sidebar1") || $(e.target).closest("#Sidebar1").length) || $(e.target).is(".cbp-filter-item"))

到

if(($(window).width() < 752) && (!($(e.target).is("#Sidebar1") || $(e.target).closest("#Sidebar1").length) || $(e.target).is(".cbp-filter-item")))