Добавить свойство отображения в аккордеон в зависимости от разрешения - PullRequest
Новая
       10

Добавить свойство отображения в аккордеон в зависимости от разрешения

0 голосов
/ 21 января 2019

Я использую аккордеон W3C на своем веб-сайте и хочу, чтобы аккордеон был активным только тогда, когда страница меньше 768 пикселей.Пока что у меня есть скрипт, настроенный таким образом, что элементы div «панели» будут переключаться, но они изначально отображаются, а не скрыты.Есть ли строка, которую я могу добавить к коду, чтобы изначально скрыть div панели, когда разрешение меньше 768 пикселей?Я попытался добавить display: none к элементу на листе css, но скрипт переключения не переопределит его.

Надеюсь, это имеет смысл! 

<script>
if (screen.width < 768) {
var acc = document.getElementsByClassName("filterAccordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
}
</script>

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Вот рабочее решение. Обратите внимание, что я закомментировал некоторый код, чтобы продемонстрировать его в режиме рабочего стола. Раскомментируйте это, и ваш код должен работать в сценарии «только для мобильных устройств». 

document.querySelector('.accordion').addEventListener('click', function (e) {
  /*if (screen.width < 768) {*/
  var currentTarget = e.target;
  if (e.target.classList.contains('accordion-title')) {
    var allDesc = Array.prototype.slice.call(document.querySelectorAll('.accordion-description'));
    allDesc.forEach(function (el) {
      el.classList.add('hidden-xs');
    });
    e.target.nextElementSibling.classList.remove('hidden-xs');
  }
  /*}*/
});
/*@media only screen and (max-width: 767px) {
  .hidden-xs {
    display: none;
  }
}*/

/* Comment below code and uncomment above */

/* For demo purpose only */
.hidden-xs {
  display: none;
}

.accordion-title,
.accordion-description {
  padding: 20px;
  margin-bottom: 10px;
}

.accordion-title {
  background-color: #ccc;
  border-radius: 3px;
  border: 1px solid;
}
<div class="accordion">
  <div class="accordion-title">Title 1</div>
  <div class="accordion-description hidden-xs">Some description</div>
   <div class="accordion-title">Title 2</div>
  <div class="accordion-description hidden-xs">Some description</div>
</div>
0 голосов
/ 21 января 2019

У меня такое чувство, что вы можете управлять этим в CSS .. 

@media only screen and (max-width: 768px) {
    .filterAccordion {
        display: none;
    }
}

Что касается аккордеона и упоминается Квентином. W3Schools, вероятно, не лучший источник информации. Для общих модулей, подобных этому, возможно, Bootstrap (3/4) может быть более идеальной средой, если вы готовы использовать ее в все.

Редактировать: MediaQueries

...