Javascript jQuery侧栏菜单背景不会隐藏单击外部

我的jQuery侧边栏菜单点击显示在侧边栏隐藏后出现问题，覆盖（.background）不会隐藏

这是你的电话号码

HTML

CSS

---

所以问题是，在侧边栏之后隐藏背景，而不是隐藏。我想要的是在单击侧边栏外部时隐藏。

您正在删除“活动”类，但没有隐藏背景div。请使用以下代码

$('#open').click(function()
    {
        $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
        $('.sidebar').toggleClass('actives');
        $(".backdrop").toggle();
    })

    $(document).click(function(e)
    {
        if($(".sidebar.actives").length > 0)
        {
            var sidebar = $(".sidebar, #open");

            if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
            {
                $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
                sidebar.removeClass('actives');
        $(".backdrop").hide();
            }
        }
    });

$('#open').click(function()
{
    $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
    $('.sidebar').toggleClass('active');
$(".backdrop").toggle();
})

$(document).click(function(e)
{
    var sidebar = $(".sidebar, #open");

    if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
    {
        $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
        sidebar.removeClass('active');
    }
});

p {
text-align: center;
}

ul
{
  list-style: none;
}

.sidebar
{
    position: fixed;
    transform: translateX(-120%);
    display: inline-block;
    height: 100vh;
    background: lightblue;
    transition: all 0.3s ease-in;
    width: 200px;
    z-index: 8;
}

.active
{
    transform: translateX(0);
}

.backdrop
{
height: 100vh;
width: 100%;
z-index: 7;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

$('#open').click(function()
    {
        $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
        $('.sidebar').toggleClass('actives');
        $(".backdrop").toggle();
    })

    $(document).click(function(e)
    {
        if($(".sidebar.actives").length > 0)
        {
            var sidebar = $(".sidebar, #open");

            if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
            {
                $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
                sidebar.removeClass('actives');
        $(".backdrop").hide();
            }
        }
    });