单击侧边栏外部时如何隐藏侧边栏? [英] how to hide sidebar when clicking outside of sidebar?

问题描述

我有一个像这样的侧边栏:

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

这是我切换侧边栏的脚本:

扩展侧边栏的切换器图标(汉堡包):

 
<button type="button" id="sidebarCollapse" class="btn"><i class="fa fa-bars navigation-icon"></i>

一些 CSS:

#sidebar {宽度:250px；位置:固定；顶部:0；左:-250px；高度:100vh；z-索引:999；背景:#fbcc34；颜色:#fff;过渡:全0.3s；溢出-y:滚动；box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);}#sidebar.active {左:0；}#解雇 {宽度:35px；高度:35px；行高:35px；文本对齐:居中；背景:#000000；位置:绝对；顶部:10px；右:10px；光标:指针；-webkit-transition:全部为 0.3s；-o-transition:全部为 0.3s；过渡:全0.3s；}#解雇:悬停{背景:#fff;颜色:#7386d5；}.overlay {显示:无；位置:固定；宽度:100vw；高度:100vh；背景:rgba(0, 0, 0, 0.7);z-索引:998；不透明度:0；过渡:所有 0.5 秒的缓入缓出；}.overlay.active {显示:块；不透明度:1；}#sidebar .sidebar-header {填充:20px；背景:#000000；}

所以当我点击侧边栏外的任何地方时，它应该会自动关闭侧边栏.我是否必须创建一个单独的函数来实现这一点?

解决方案

您可以使用以下代码执行此操作:

$('body').click(function(event){if($(event.target).attr('id') !== "sidebar" && $(event.target).attr('id') !== "sidebarCollapse") {$('#sidebar').removeClass('active');$('.overlay').removeClass('active');}});

I have a sidebar that looks like this:

Clicking the arrow will collapse the sidebar again. However, I want to auto close the sidebar if I click outside of the sidebar. Would that be possible?

This is my script for toggling the sidebar:

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

The toggler icon (hamburger) that expands the sidebar:

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

Some 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;
}

So when I click anywhere outside the sidebar, it should close the sidebar automatically. Do I have to create a separate function to achieve this?

解决方案

You can do this with code below:

$('body').click(function(event){
   if($(event.target).attr('id') !== "sidebar" && $(event.target).attr('id') !== "sidebarCollapse") {
     $('#sidebar').removeClass('active');
     $('.overlay').removeClass('active');
   }
});

这篇关于单击侧边栏外部时如何隐藏侧边栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！