javascript - 在元素外部单击不起作用

Question

我有这个代码:

function showAll(el){
  var id = el.parentNode.id;
  var all= document.getElementById(id).getElementsByClassName('items')[0];

  if(all.style.display === 'block'){
    all.style.display = 'none';
  } else{
    all.style.display = 'block';
    window.addEventListener('mouseup', function(e){
    document.getElementById('test').innerHTML = e.target.className;
      if(e.target != all){
        all.style.display = 'none';
      }
    });
  }

}

<div id="parent">
    <div class="selected" onClick="showAll(this);">
    </div>
    <div class="items" style="display: none">
    </div>
</div>

基本上我想要实现的是:点击 selected 显示 items 如果我再次点击 selected 现在隐藏了或者，如果我在 items 之外单击(该页面上的一个随机点，甚至在 selected 上)，我希望能够隐藏 items。

问题是，如果没有 EventListener，当我点击 selected 时，它会显示 items，然后如果我再次点击 >selected 它可以隐藏 items 但如果我点击一个随机点它就无法关闭 items。

但是当我添加 EventListener 并点击 selected 时，它可以点击一个随机点来关闭 items 但它不起作用再次单击 selected 以关闭 items。

谁能帮我提供完整的 JavaScript 解释，好吗？

Answer 1

您将希望使用高度可重用的代码。我一直在我的网络平台上使用 change() 和 id_()，它们非常直接和简单。在下面的示例中，第二个参数将使类为空(您也可以使用 id_('items').removeAttribute('class') 以获得更清晰的 DOM(文档对象模型))。

HTML

<input onclick="change(id_('items','');" type="button" value="Display Items" />
<div clas="hidden" id="items"><p>Items here.</p></div>

CSS

.hidden {display: none;}

JavaScript

function change(id,c)
{
 if (id_(id)) {id_(id).className = c; if (id_(id).className=='') {id_(id).removeAttribute('class');}}
 else if (id) {id.className = c; if (id.className=='') {id.removeAttribute('class');}}
 else {alert('Error: the class id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+c);}
}

function id_(id)
{
 if (id == '' && window['console']) {console.log('Developer: empty id called from: '+id_.caller.toString().split('function ')[1].split('(')[0]);}
 return (document.getElementById(id)) ? document.getElementById(id) : false;
}

此代码源于多年来对同一平台的改进，而不是毫无意义地改变事物的行业标准戏剧。通过我的个人资料中的链接，您只需单击两次即可在我的平台的 JavaScript 文档中找到更多高度可重用的函数。