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>

重申一下，这段代码可以在任何屏幕尺寸下正常工作。当用户以较小的屏幕尺寸单击选项卡时，会出现问题，然后将屏幕大小调整为侧边栏处于活动状态的位置（margin-left：0）。在这种情况下，单击屏幕上的任何位置将使侧边栏消失。侧边栏应始终显示屏幕尺寸＆gt; 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")))

响应边栏选项卡和单击事件切换

1 个答案: