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

使用javascript，您可以执行以下操作：

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

    closeNav();
}

Answer 2

<强> JQuery的

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

参考文档：

Answer 3

我发现你已经有了打开和关闭侧边栏的功能，

点击＆＃34;随时随地＆＃34;和＆＃34;点击身体＆＃34;相同，但我猜你不想在你点击它时关闭侧边栏。

所以，你可以做什么：

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

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

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

因此，当您点击侧边栏时，您不会点击正文，因为事件传播已停止，当您点击其他地方时，它会关闭您的侧边栏。

希望它有所帮助，

最好的问候

Answer 4

老实说，我认为你应该在这里使用jQuery，因为它非常适合DOM操作。如果由于某种原因你必须使用香草js那么它会变得有点棘手。

在jQuery site上很容易解释为项目添加jQuery。这里是一个在js / jquery中选择元素的比较：

Vanilla JS：

$('#mySidenav')

jQuery的：

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

要在事件发生时（即按下按钮或点击远离菜单）发生事情，您需要设置事件处理程序。

很难从您的代码中看到，因为#topBar似乎缺少CSS，所以我看不到您的网站（这是您的代码running in jsfiddle）。

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

这个例子基本上说当ID为'openMenu'的元素被'点击'时，运行'openMenu'功能 - 简单！：）

openMenu函数看起来像（基本示例）：

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

更好的方法是使用切换功能根据菜单是已打开还是关闭来切换菜单：

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

关于单击菜单时关闭菜单，可以将事件处理程序绑定到页面主体并使用jQuery的.one（）函数（仅运行一次），它将检测是否单击了正文并且然后运行menuToggle功能 - 你最终会得到2个处理程序：

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

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

Cursor cursor = getContentResolver().query(Uri.parse("content://com.android.calendar/events"), 
               new String[]{"_id", "title", "description", "dtstart", "dtend", "eventLocation"}, 
              null, null, null);

mouseleave处理程序基本上是说，一旦鼠标指针离开ID为'sideNav'的元素，就运行toggleMenu函数。

我也是新手，所以我的例子可能不太好，但我希望我至少帮助过一点。希望一些真正的javascript开发人员将很快添加到此或提供更好的示例。

干杯，戴夫

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

4 个答案: