0

我有这个jsfiddle，它可以工作一次。

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x){
  alert(x);
  var mask = document.createElement('div');
  mask.id = 'maskIt';
  mask.setAttribute("class", "maskIt");
  mask.onclick = function(){toggle_off('maskIt');}
  mask.innerHTML = 'click to close mask';
  document.body.appendChild(mask);
}

单击它会打开一个蒙版（图层），单击蒙版时会自动关闭它-到这里为止都很好。

在第二次点击时，面具会再次打开，但是当你第二次点击它时它不会关闭。

有任何想法吗？

4

2 回答 2

1

而不是隐藏 div 您应该在每次单击时创建一个新 div 时将其删除

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  var mask = document.getElementById(itemID);
  mask.parentNode.removeChild(mask);
}

演示

于 2013-01-12T20:22:20.197 回答
1

当您关闭覆盖时，您不会破坏“maskIt”的第一个实例，因此它们会在后台建立。如果您在第二次单击后检查页面，您将看到两个 maskIt div，第一个隐藏。

当您调用 getElementById('maskIt') 时，它会在文档中找到第一个隐藏的一个，因此不会隐藏第二个。

为什么不重复使用第一个面具？

function toggle_off(itemID) {
  alert(itemID + '->' + document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x) {
  alert(x);
  var mask = document.getElementById('maskIt');
  if (mask == null) {
    mask = document.createElement('div');
    mask.id = 'maskIt';
    mask.setAttribute("class", "maskIt");
    mask.onclick = function () {
      toggle_off('maskIt');
    }
    mask.innerHTML = 'click to close mask';
    document.body.appendChild(mask);
  }
  else
  {
    mask.style.display = "block";
  }
}

http://jsfiddle.net/dFp6f/2/

于 2013-01-12T20:31:58.597 回答