javascript - 无法使用 Javascript 和 CSS 显示/隐藏

标签 javascript css

根据我见过的一些示例,我尝试能够单击以显示/隐藏 Div ID。内容是隐藏的,但是当我点击 AFC 季后赛时, 什么都没发生。知道我做错了什么吗?

CSS 样式表包括:

.hidden { visibility: hidden; }
.unhidden { visibility: visible; } 

这是javascript:

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

这是 HTML 代码:

<div class="panel panel-afc nopad playoffs">
  <div class="panel-heading">
    <a href="javascript:unhide('afc-playoff-container');" rel="nofollow">AFC Playoffs</a>
  </div>
  <div class="panel-body">
    <div id="afc-playoff-container" class="hidden">
      <div id="afc playoff">
        <table class="data-table1" border="0" width="100%"></table>
      </div>
    </div>
  </div>
</div>

最佳答案

function unhide() {
  var item = document.querySelector(this.dataset.target);
  if (item) {
    item.classList.toggle('hidden');
  }
}

window.onload = function() {
  var toggleDivs = document.getElementsByClassName('toggleDiv');
  if (toggleDivs) {
    for (var i = 0; i < toggleDivs.length; i++) {
      toggleDivs[i].addEventListener('click', unhide);
    }
  }
};
.hidden {
  display: none;
}
#afc-playoff-container {
  width: 120px;
  height: 120px;
  background: #DDDDDD;
}
<div class="panel panel-afc nopad playoffs">
  <div class="panel-heading">
    <a href="javascript:;" class="toggleDiv" data-target='#afc-playoff-container' rel="nofollow">AFC Playoffs</a>
  </div>
  <div class="panel-body">
    <div id="afc-playoff-container" class="hidden">
      <div id="afc playoff">
        <table class="data-table1" border="0" width="100%"></table>
      </div>
    </div>
  </div>
</div>

关于javascript - 无法使用 Javascript 和 CSS 显示/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37007865/

相关文章:

javascript - 如何使用 javascript 查找 asp 控件 ID?

JavaScript 使用正则表达式进行匹配

css - 响应式 Sprite 动画 GSAP

javascript - ReactJS 组件在 className 更改时意外重新加载

css - 字体在 Firefox 和 IE 上看起来与在 Chrome 上不同

javascript - Redux 和 React-router 正确设置

javascript - 如何在 jquery ajax 的后期数据处理过程中设置加载图像?

javascript - CKEditor 4.1 的简​​单插入/删除标签按钮

css - LESS 嵌套选择器不起作用

javascript - 如何更改此插件的 lightbox2 箭头位置?