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

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 上有很好的解释。 .这是在 js/jquery 中选择元素的比较:

普通 JS:

document.getElementById("mySidenav")

jQuery:

$('#mySidenav')

要在事件发生时(即按下按钮或单击菜单外)让事情发生，您需要设置事件处理程序。

很难从您的代码中描绘出来，因为 #topBar 似乎缺少 CSS，因此我无法很好地看到您的网站(这是您的代码 running in jsfiddle)。

但是假设您有一个 ID 为#openToggle 的按钮。您将在 css 中使用正确的宽度、高度等设置您的 sideNav，并将其保留为显示:无。然后我们创建一个事件处理程序来在您单击该按钮时执行某些操作: //事件处理程序位于 js 文件或脚本标记的底部 $('#openMenu').on('点击', 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);

关于当您点击离开菜单时关闭菜单，您可以将事件处理程序绑定(bind)到页面主体并使用 jQuery 的 .one() 函数(仅运行一次)，它将检测主体是否被单击并然后运行 ​​menuToggle 函数 - 你最终会得到 2 个处理程序:

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

或者，您可以在鼠标指针离开菜单时关闭菜单吗？

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

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

我也是新手，所以我的例子可能不是很好，但我希望我至少能帮上一点忙。希望一些真正的 javascript 开发者很快就会加入到这里或提供更好的例子。

干杯，戴夫