Нет jQuery: div onclick переключает функции div - PullRequest
Новая
       53

Нет jQuery: div onclick переключает функции div

0 голосов
/ 05 августа 2020

Я jQuery -фоби c и новичок в css. Поэтому не рекомендуется использовать jQuery.

У меня два вопроса по моему коду.

  1. [решено] Когда я нажимаю любой из .active divs, остальные go вниз. Как исправить наверху?

  2. Как изменить отображение с none на active при нажатии на div? (код, который я написал, показывает 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>

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Если вам подходит обычная функция 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>
0 голосов
/ 05 августа 2020

  1. Вы можете легко исправить вертикальное выравнивание, добавив "vertical-align: top;" в ваш ".active" класс в вашем CSS.

  2. Вы говорите, что не хотите использовать jQuery. Я не знаю, являетесь ли вы простым javascript -phobi c, но если нет, я бы предложил использовать простой javascript, поскольку это самый простой способ. Если вы хотите продолжать фокусироваться на CSS, один из способов сделать это - сделать их флажками или переключателями (в зависимости от эффекта, который вы ищете), сделать флажок / переключатель невидимым и стилизовать их как ваши div.

Также нет причин быть jQuery -фоби c. Это может показаться немного подавляющим, но основы на самом деле не так уж и сложны! :)

...