JavaScript Accordion: почему он сжимается на маленьких экранах? - PullRequest
Новая
       6

JavaScript Accordion: почему он сжимается на маленьких экранах?

0 голосов
/ 26 мая 2018

Я не хочу использовать целую библиотеку (jQuery UI) только для достижения этого простого эффекта.Код, который я использую, работает в определенной степени, но он сжимается при изменении размера браузера ниже 1000 пикселей.

Результат приведен на моей странице часто задаваемых вопросов здесь: https://www.unidrones.co.za/VRentals/faq (вы заметитеответ начинает скрываться за следующим аккордеоном, когда экран становится меньше)

Я пытался заменить «px» на «em», но это не работает.Что я должен сделать, чтобы он работал как обычный аккордеон для всех размеров экрана? 

<ul id="accordion">
<li><p>Question...</p></li>
<li><p>Answer...</p></li>
<li><p>Question...</p></li>
<li><p>Answer...</p></li>
</ul>

<script>
$("#accordion li:even").addClass("accordion");
$("#accordion li:odd").addClass("panel");
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("activeAccordion");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

PS Я использовал здесь компонент jQueryUI https://www.fishgelatine.co.za/recipes, и я хочу, чтобы мой ванильный аккордеон JSработа.

1 Ответ

0 голосов
/ 26 мая 2018

Ваша максимальная высота на панели div является проблемой.Пожалуйста, попробуйте рассчитать высоту всех открытых аккордеонов после изменения размера окна.Это должно решить вашу проблему.Вам просто нужно запустить код, который вычисляет высоту в указанном выше коде, в функции window.resize для всех открытых аккордеонов. 

window.addEventListener("resize", recalculate(function(e){
    for (i = 0; i < acc.length; i++) {
        var panel = acc[i].nextElementSibling;  
        if (panel.style.maxHeight){
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
    }
});
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("activeAccordion");
    var panel = this.nextElementSibling;  
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;  
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }     
  });
}

Или вы также можете сделать следующее.

Iдумаю, что вы должны remove this part вашего js 

if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = panel.scrollHeight + "px";
}

Вместо этого напишите это 

if (panel.style.display === "block"){
  panel.style.display = null;
} else {
    panel.style.display = "block";
}

И добавьте этот CSS 

#faq .panel {
    display: none;
}

Но его недостатком является то, что ваша анимацияэффекты не будут отображаться, так что вы можете сделать это.

Или вы также можете сделать это

Измените свой код максимальной высоты следующим образом: 

if (panel.style.maxHeight === "inherit"){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = "inherit";
}
...