当我按下任何地方时如何关闭侧栏

Question

我想要做的是在按下屏幕上的任何位置时关闭侧栏。

怎么办？我该如何做到这一点，以便当我将鼠标悬停在图像上时，我的文字会显示，而不是整个时间都可见？

function openNav() { 
 
    document.getElementById("mySidenav").style.width = "300px"; 
 
    document.getElementById("toggle").style.position = "static"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("toggle").style.marginRight = "0"; 
 
    document.getElementById("toggle").style.position = "relative"; 
 
}

#toggle { 
 
    position: relative; 
 
    left: 400px; 
 
    font-size: 1.2em; 
 
    visibility: visible; 
 
} 
 

 
#toggle:hover { 
 
    color: white; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: transparent; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 50px; 
 
} 
 

 
.sidenav a { 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

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

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

<div> 
 
    <ul id="topBar"> 
 
    <li id="ixora">Ixora</li> 
 
    <li class="lists">2014</li> 
 
    <li class="lists">2015</li> 
 
    <li id="toggle" onclick="openNav() ">&#9776;</li> 
 
    </ul> 
 
</div> 
 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <span class="textImage">Outing</span> 
 
    <a href="#" class="images"><img src="outing.jpg"></a> 
 

 
    <span class="textImage">Prom Night</span> 
 
    <a href="#" class="images"><img src="prom.jpg"></a> 
 

 
    <span class="textImage">PortDickson Trip</span> 
 
    <a href="#" class="images"><img src="pd.jpg"></a> 
 

 
    <span class="textImage">Merdeka</span> 
 
    <a href="#" class="images"><img src="merdeka%20(2).jpg"></a> 
 
</div>

Answer 1

老实说，我认为你应该在这里使用jQuery，因为它是梦幻般的DOM操作。如果由于某种原因你必须使用vanilla js，那么它会变得有点棘手。

将jQuery添加到您的项目很容易，并在jQuery site很好地解释。在这里，选择在元素的SA比较JS/jQuery的：

香草JS：

document.getElementById("mySidenav") 

的jQuery：

$('#mySidenav') 

要得到的东西，当事件发生时的情况发生（即按下按钮，或点击远离菜单）设置事件处理程序。

很难从您的代码中获取图片，因为#topBar似乎缺少CSS，因此我无法很好地查看您的网站（代码为running in jsfiddle）。

但让我们说你有一个ID为#openToggle的按钮。你可以用正确的宽度，高度等在css中设置你的sideNav，并将其保留为display：none。然后，我们创建一个事件处理函数，当你点击该按钮时执行某些操作： //事件处理程序在你的js文件或脚本标记的底部显示 $（'＃openMenu'）on（'click'，openMenu）;

这个例子基本上是说当ID为'openMenu'的元素被'点击'时运行'openMenu'函数 - 很简单！ :)

的openMenu功能看起来是这样的（基本的例子）：

function openMenu() { 
    var $menu = $('#sideNav'); 
    $menu.show(); 
}; 

一个更好的办法是有一个切换基于它是否已打开或关闭的菜单切换功能：

function toggleMenu() { 
    var $menu = $('#sideNav'); 

    if (($menu).is(':visible')) { //if it's visible 
    $menu.hide();    //hide the menu 
    } else {      //else it's hidden 
    $menu.show();    //so show it 
    } 
}; 

// event handler for menu toggle button 
$('#menuToggle').on('click', toggleMenu); 

关于当你点击离开它时关闭菜单，你可以绑定一个事件处理程序到页面主体，并使用jQuery的.one（）函数（只运行一次），这将检测身体是点击，然后运行menuToggle功能 - 你最终会得到2汉此dlers：

// event handler for menu toggle button 
$('#menuToggle').on('click', toggleMenu); 
$('body').one('click', toggleMenu); 

或者你可以有菜单时关闭鼠标指针离开菜单？：

//event handlers 
$('#menuToggle').on('click', toggleMenu); 
$('#sideNav').mouseleave(toggleMenu); 

的鼠标离开处理基本上是说，一旦鼠标指针离开与ID的元素'sideNav'然后运行toggleMenu功能。

我也是一个新手，所以我的例子可能不是很好，但我希望我帮助至少一点。希望一些真正的JavaScript开发人员很快就会加入到这个或给出更好的例子。

干杯，戴夫

Answer 2

使用JavaScript，你可以做到以下几点：

document.onclick = function(e){ 
    if(e.target.id == "mySidenav"){ 
     return false; 
    } 

    closeNav(); 
} 

Answer 3

JQuery的

$(document).onclick(function() { 
    $("#mySidenav").hide(); 
} 

参考文档：

• JQuery .on
• JQuery .hide

Answer 4

我看到你已经拥有的功能打开和关闭侧边栏，

点击“无处不在”是一样的“点击身体”，但我猜你不希望你的边栏在你点击时关闭。

所以，这里是你可以做什么：

var myNav = document.getElementById("mySidenav"); 

myNav.onclick = function(e) { 
    e.stopPropagation(); 
} 

document.body.onclick = function(e) { 
    closeNav(); 
} 

所以，当你点击侧边栏，你会不会对身体，因为事件的传播停止点击，当你点击其他地方，它将关闭你的侧边栏。

希望它能帮助，

问候