響應式側邊欄選項卡，然后單擊事件切換

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

這很簡單。 不知道為什么這個坐在這里沒有任何回應。 （盡管現在看來，答案很明顯。）只需更改一行即可

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")))