Исчезнуть и удалить раздел в WordPress - PullRequest
Новая
       13

Исчезнуть и удалить раздел в WordPress

0 голосов
/ 30 октября 2018

Как я могу исчезнуть, а затем удалить раздел после нажатия на него в WordPress? Это код, который я использовал в скобках, который работал, но не работает для WordPress. Я использую тему Oceanwp, которая позволяет мне легко добавлять код CSS и JavaScript, но если у вас есть лучшее представление о том, как достичь этого результата Я был бы очень признателен. Вы можете точно увидеть, чего я хочу достичь с этим сайтом https://www.alphafx.co.uk/ после того, как вы нажмете на букву A, затем на любую кнопку (КОРПОРАТИВНАЯ или УЧРЕЖДЕНИЕ), текущий раздел плавно исчезает 

document.querySelector('.list').addEventListener("click", function(e) {
  if (e.target.localName === "section") {

    //Add CSS hide and animate with fade out
    var currentCSS = this.className;
    this.className = currentCSS + 'hide';

    var removeTarget = e.target.parentNode.parentNode;
    setTimeout(function() {
      removeTarget.parentNode.removeChild(removeTarget);
    }, 1000);
  };
});
.hide {
  opacity: 0;
}

.top {
  transition: 1s linear all;
  background-color: blue;
  height: 100vh;
}

section {
  background-color: green;
}
<div class="top">
  <section class="list">This is a section</section>
</div>

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Поскольку вы используете jquery, вы можете использовать функцию 'fadeOut' 

$('.list').click(
  function(){
    $(this).fadeOut();
  }
);
0 голосов
/ 30 октября 2018

Это может быть то, что вам нужно. 

document.querySelector('.list').addEventListener("click", function(e) {
  //Add CSS hide and animate with fade out
  this.classList.add("hide");

  const removeTarget = e.target.parentNode;
  setTimeout(function() {
    removeTarget.parentNode.removeChild(removeTarget);
  }, 1000);
});
.hide {
  opacity: 0;
}

.top {
  background-color: blue;
  height: 100vh;
}

section {
  background-color: green;
  opacity: 1;
  transition: opacity 1s ease;
}
<div class="top">
  <section class="list">This is a section</section>
</div>
...