Question

我在<div id="first" class="source">设置了大量项目我在谷歌浏览器中，当页面加载时，当我点击OnClick按钮时它会隐藏这些项目，它会隐藏它们，但我无法再次点击它并使其隐藏。

HTML

<body onload="setup();">
<a  href="#first" onClick="shoh('first');" >

JS：

function setup() {
  foo = document.getElementById('first');
  foo = document.getElementsByClassName('source');
  for (c=0; c<foo.length; c++) {
    foo[c].style.display='none'
  }
}


function shoh(id) {
  if (document.getElementById(id).style.display = 'none'){
    var divs = document.getElementById(id);
    for(var i=0; i<divs.length; i++) { 
      divs[i].style.display='block'
    }
  } else {
    cow = document.getElementById(id);
    for(a=0; a<cow.length; a++) { 
      cow[a].style.display='none'
    }
  }
}

Answer 1

您的条件不做比较。你需要改变

if (document.getElementById(id).style.display = 'none'){

到

if (document.getElementById(id).style.display == 'none'){

Answer 2

你有几个问题：

如果比较两个变量，则需要使用==，因此它应该是：

document.getElementById(id).style.display == 'none'

此外，您正在使用getElementById，它返回单个节点，而不是数组。因此，您不应该循环返回的值：

var div = document.getElementById(id);
div.style.display='block';

所以最后，它应该是这样的：

function shoh(id) {
  if (document.getElementById(id).style.display == 'none'){
    var div = document.getElementById(id);
    div.style.display='block';
  } else {
    cow = document.getElementById(id);
    cow.style.display='none';
  }
}

javascript改变样式显示

2 个答案: