时间戳

首页 > 解决方案 > 没有 jQuery：div onclick 切换 div 功能

html - 没有 jQuery：div onclick 切换 div 功能

问题描述

我是 jQuery-phobic 和 CSS 新手。所以，请不要推荐使用jQuery。

我的代码有两个问题。

  1. [已解决]当我点击任何一个.activediv 时，其他的会掉下来。怎么固定在上面？

  2. 当我单击 div时，如何将显示从更改none为？active（我写的代码只显示 div，只要我“点击”它）

.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>

标签： htmlcsstoggle

解决方案

如果通常的 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>

推荐阅读