无 jQuery : div onclick 切换 div 功能

Question

我有 jQuery-恐惧症并且是 css 的新手。所以，请不要推荐使用jQuery.

我的代码有两个问题。

[已解决]当我点击.active div中的任何一个时，其他的都掉了。如何固定在上面？
如何在单击 div 时将显示从 none 更改为 active？（我写的代码只显示 div 只要我 'click' 它）

.wrap{
 text-align: center;
}
.hidden{
  background: grey;
  display : none;
}

.active{
  background : lightcoral;
  display: inline-block;
  vertical-align: top;
}

.active:active > .hidden{
  display: block;
  margin : 0 0;
}

<div class = 'wrap'>
      <div class = 'active'>
        <h2>1</h2>
        <div class ='hidden' onclick='layer_toggle()'>a</div>
      </div>
      <div class = 'active'>
        <h2>2</h2>
        <div class ='hidden'>b</div>
      </div>
      <div class = 'active'>
        <h2>3</h2>
        <div class ='hidden'>c</div>
      </div>
    </div>

Answer 1

您可以通过添加来轻松修复垂直对齐 “vertical-align：顶部；”到你的 CSS.
中的“.active”class
你说你不想用jQuery。我不知道你是否也是普通的 javascript-phobic，但如果不是，我建议使用简单的 javascript，因为这是最简单的方法。如果您想继续关注 CSS，一种方法是将它们设置为复选框或单选按钮（取决于您要寻找的效果），使 checkbox/radio 按钮不可见并将它们设置为你的 div。

还有，没有理由是jQuery-phobic。看起来有点不知所措，但基础知识真的没有那么难！ :)

Answer 2

如果通常的 javascript 功能适合您。

function switch_active(e) {
  if (e.querySelector('.hidden').style.display == 'none') {
    e.querySelector('.hidden').style.display = 'block';
  } else {
    e.querySelector('.hidden').style.display = 'none';
  }
}

.wrap{
 text-align: center;
}
.hidden{
  background: grey;
  display : none;
}

.active{
  background : lightcoral;
  display: inline-block;
  vertical-align: top;
}

<div class = 'wrap'>
      <div class = 'active' onclick='switch_active(this)'>
        <h2>1</h2>
        <div class ='hidden'>a</div>
      </div>
      <div class = 'active' onclick='switch_active(this)'>
        <h2>2</h2>
        <div class ='hidden'>b</div>
      </div>
      <div class = 'active' onclick='switch_active(this)'>
        <h2>3</h2>
        <div class ='hidden'>c</div>
      </div>
    </div>

无 jQuery : div onclick 切换 div 功能

No jQuery : div onclick toggle div functions

html

css

toggle