单击侧边栏外部时如何隐藏侧边栏？

Question

我有一个看起来像这样的侧边栏：

单击箭头将再次折叠侧边栏。但是，如果我单击侧边栏外部，我想自动关闭侧边栏。这可能吗？

这是我用于切换侧边栏的脚本：

<script type="text/javascript">

        $(document).ready(function() {

            $("#sidebar").mCustomScrollbar({

                theme: "minimal"

            });

            $('#dismiss, .overlay').on('click', function() {

                $('#sidebar').removeClass('active');

                $('.overlay').removeClass('active');

            });

            $('#sidebarCollapse').on('click', function() {

                $('#sidebar').addClass('active');

                $('.overlay').addClass('active');

                $('.collapse.in').toggleClass('in');

                $('a[aria-expanded=true]').attr('aria-expanded', 'false');

            });

        });

    </script>

展开侧边栏的切换器图标（汉堡包）：

 <div class="col-4 my-auto text-left p-1">

                        <button type="button" id="sidebarCollapse" class="btn">

                            <i class="fa fa-bars navigation-icon"></i>

                        </button>

一些CSS：

#sidebar {

    width: 250px;

    position: fixed;

    top: 0;

    left: -250px;

    height: 100vh;

    z-index: 999;

    background: #fbcc34;

    color: #fff;

    transition: all 0.3s;

    overflow-y: scroll;

    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);

}

#sidebar.active {

    left: 0;

}

#dismiss {

    width: 35px;

    height: 35px;

    line-height: 35px;

    text-align: center;

    background: #000000;

    position: absolute;

    top: 10px;

    right: 10px;

    cursor: pointer;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

#dismiss:hover {

    background: #fff;

    color: #7386d5;

}

.overlay {

    display: none;

    position: fixed;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.7);

    z-index: 998;

    opacity: 0;

    transition: all 0.5s ease-in-out;

}

.overlay.active {

    display: block;

    opacity: 1;

}

#sidebar .sidebar-header {

    padding: 20px;

    background: #000000;

}

因此，当我单击侧边栏之外的任何位置时，它应该自动关闭侧边栏。我是否必须创建一个单独的函数才能实现此目的？

Answer 1

您可以使用下面的代码来做到这一点：$('body').click(function(event){&nbsp; &nbsp;if($(event.target).attr('id') !== "sidebar" && $(event.target).attr('id') !== "sidebarCollapse") {&nbsp; &nbsp; &nbsp;$('#sidebar').removeClass('active');&nbsp; &nbsp; &nbsp;$('.overlay').removeClass('active');&nbsp; &nbsp;}});