在其他地方点击时关闭汉堡菜单

我有一个汉堡菜单，如果在任何地方点击它自己，我需要关闭它。在其他地方点击时关闭汉堡菜单

这里是我的小提琴：

这里是我的代码如下所示：

.sidenav { 
    height: 100%; 
    width: 0px; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    right: 0; 
    /* background-color: #111; */ 
    background-color: white; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: medium; 
    /* color: #818181; */ 
    display: block; 
    transition: 0.3s; 
    border-bottom:1px solid black; 
} 

.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

.sidenav .closebtn { 
     border-bottom: 0px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    font-size: 36px; 
    margin-left: 50px; 
} 

/* #main { 
    transition: margin-left .5s; 
    padding: 16px; 
} */ 

@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 15px;} 
    .sidenav a {font-size: 18px;} 
} 
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1; position:absolute; text-align:center; font-size:12px;} 
.leftFloat{ 
    float:left; 
} 
::-webkit-scrollbar { 
    width: 0px !important; /* remove scrollbar space */ 
    background: transparent; /* optional: just make scrollbar invisible */ 
}

来源

2017-04-25 Ashish Bahl

你想使用原生JavaScript吗？ – Bram

只是一个想法，切换汉堡菜单更直观https://jsfiddle.net/igaurav/zvb3me2b/1/ – igaurav

试试这个：

window.onclick = function(event) { 
    if ($('#mySidenav').width() == 250) { 
    $('#mySidenav').width(0); 
    } 
}

来源

2017-04-25 09:59:43

此代码不起作用。检查此[小提琴]（https://jsfiddle.net/t0xessfr/ 3 /） –

我已经更新了代码。这将正常工作。 @AshishBahl –

尝试this。

$(document).click(function(event) { 
    if (!$(event.target).closest('#mySidenav, #checkOpen').length) { 
    if ($('#mySidenav').is(":visible")) { 
     document.getElementById("mySidenav").style.width = "0px"; 
    } 
    } 
})

来源

2017-04-25 10:00:44

这段代码可以工作，但它改变了我的程序的功能！ –

在其他地方点击时关闭汉堡菜单

回答

相关问题