通过在外部单击并单击按钮来关闭div

原学程将引见经由过程在内部单打并单打按钮去封闭div的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

通过在外部单击并单击按钮来关闭div 教程 第1张

成绩描写

我正在测验考试树立1个下推菜单,不妨经由过程单打内部(翻开的div)并经由过程单打按钮/img(翻开div)去封闭该菜单。

戴有onClick功效的图象:

<img onclick="hide()" id="menu" src="....">

应翻开以及封闭的下推列表,类申明下推列表为显示:无

<ul id="dropdown" class="dropdown-breadcrumb">
<li>...</li>
</ul>

这是我今朝为止的处理计划:

function hide() {
 var x = document.getElementById("dropdown");

 if (x.style.display === "none") {
  x.style.display = "block";
 } else {
  x.style.display = "none";
 }
}

当我测验考试添减当用户鄙人推列表以外单打时封闭该下推列表的函数时:

window.addEventListener('mouseup',function(event){
  var dropd = document.getElementById('dropdown');

  if(event.target != dropd && event.target.parentNode != dropd){
dropd.style.display = 'none';
  }
});

而后我获得1个翻开的下推列表,由于onClick-函数开动了。

有人能助我组开这些功效吗?感谢!

推举谜底

您不妨将一切逻辑戴到单打侦听器,并在函数中处置元素的看来性:

数据-lang="js"数据-隐蔽="假"数据-掌握台="真"数据-巴贝我="假">

window.addEventListener('mousedown', function(event) {
  var dropd = document.getElementById('dropdown');
  var img = document.getElementById('menu');

  if (event.target === img && dropd.style.display === "none") {
 dropd.style.display = "block";
  } else if (event.target != dropd && event.target.parentNode != dropd) {
 dropd.style.display = 'none';
  }
});
<img id="menu" alt="img" />
<ul id="dropdown" class="dropdown-breadcrumb" style="width: 四0px;">
  <li>First</li>
  <li>Second</li>
</ul>

佳了闭于经由过程在内部单打并单打按钮去封闭div的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。