0

Сейчас только на первой, как сделать чтобы на второй тоже было, но при этом чтобы они открывались, независимо друг от друга

animateDisplay = function(target, animationClass, displayType, timeout) {
    // timeout should be longer than css transition
    var doneTimedDisplay = false,
      displaying = false;

    target.addEventListener('transitionend', function() {
      if (!target.classList.contains('show')) {
        target.style.display = 'none';
      }
      doneTimedDisplay = true;
    });
    if (!target.style.display || target.style.display === 'none') {
      displaying = true;
      target.style.display = displayType;
    } else {
      displaying = false;
    }

    setTimeout(function() {
      target.classList.toggle(animationClass);
      doneTimedDisplay = false;
    }, 10);

    if (!displaying) {
      setTimeout(function() {
        // failsafe for transitioned not firing
        if (!doneTimedDisplay) {
          target.style.display = 'none';
        }
        doneTimedDisplay = true;
      }, timeout);
    }
  };

 document.querySelector('.mybutt')
   .addEventListener('click', function() {
   animateDisplay(document.querySelector('.content'), 'show', 'block', 300)
 });
.box {

}
.content {
  height: 100px;
  width: 100px;
  background: yellow;
  opacity: 0;
  display: none;
  position: absolute;
  transition: all 300ms ease;
  left: 30px;
}

.content.show {
  opacity: 1;
}

.mybutt {



}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - display none transition</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<button class="mybutt">Hit me 1</button>
<div class="box">
  <div class="content">Hi 1</div>
</div>


<button class="mybutt">Hit me 2</button>
<div class="box">
  <div class="content">Hi 2</div>
</div>


<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

3
  • Вы устаналиваете слушатель только на первый элемент. Для того, чтобы на все элементы с определенным классом повесить, Вам надо использовать querySelectorAll и forEach 16 фев в 10:58
  • я незнаю как это написать, я сидел с этим неделю, но неполучилось ничего, пробовал разные варианты
    – Anrisssss
    16 фев в 11:02
  • там должен быть, список постов, и под каждым постом кнопка поделиться всплывающая это на вордпресе
    – Anrisssss
    16 фев в 11:09

2 ответа 2

1
 document.querySelectorAll('.mybutt').forEach(item => {
    item.addEventListener('click', function() {      
      animateDisplay(this.nextElementSibling.querySelector('.content'), 'show', 'block', 300)
    });
 })
0

как сделать чтобы на второй тоже было, но при этом чтобы они открывались, независимо друг от друга

Предлагаю для удобства немного изменить html (см.пример ниже). Это позволит довольно просто определять группу элементов через единого родителя.

Поскольку поиск "соседних" элементов более мудреный. :)

const ob = document.querySelector('body')
ob.addEventListener('click', e => {
  const o = e.target.closest('.mybutt')
  if (!o) {
    if (e.target.closest('.content')) return
    ob.querySelectorAll('.content.show').forEach(el => animateDisplay(el, 'show', 'block', 300))
    return
  }
  const op = e.target.closest('.container')
  const el = op.querySelector('.content')
  animateDisplay(el, 'show', 'block', 300)
});

function animateDisplay(target, animationClass, displayType, timeout) {
  // timeout should be longer than css transition
  var doneTimedDisplay = false,
    displaying = false;

  target.addEventListener('transitionend', function() {
    if (!target.classList.contains('show')) {
      target.style.display = 'none';
    }
    doneTimedDisplay = true;
  });
  if (!target.style.display || target.style.display === 'none') {
    displaying = true;
    target.style.display = displayType;
  } else {
    displaying = false;
  }

  setTimeout(function() {
    target.classList.toggle(animationClass);
    doneTimedDisplay = false;
  }, 10);

  if (!displaying) {
    setTimeout(function() {
      // failsafe for transitioned not firing
      if (!doneTimedDisplay) {
        target.style.display = 'none';
      }
      doneTimedDisplay = true;
    }, timeout);
  }
};
body {
  width: 100vw;
  height: 100vh;
}
.box {}

.content {
  height: 100px;
  width: 100px;
  background: yellow;
  opacity: 0;
  display: none;
  position: absolute;
  transition: all 300ms ease;
  left: 30px;
}

.content.show {
  opacity: 1;
}

.mybutt {}
<div class='container'>
  <button class="mybutt">Hit me 1</button>
  <div class="box">
    <div class="content">Hi 1</div>
  </div>
</div>


<div class='container'>
  <button class="mybutt">Hit me 2</button>
  <div class="box">
    <div class="content">Hi 2</div>
  </div>
</div>

12
  • круто, спасибо !
    – Anrisssss
    16 фев в 11:10
  • 1
    это, конечно, отлично. Но человек так не разберется с коллекцией элементов и методами их обработки 16 фев в 11:14
  • я просто незнаю сколько бы ещё просидел, неделю, две
    – Anrisssss
    16 фев в 11:17
  • @PavelNazarian, тебе видней с чем нужно разбираться человеку...
    – ksa
    16 фев в 11:24
  • 2
    @ksa не дуйся, всё будет хорошо 16 фев в 11:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.