Bootstrap аккордеон и конфликт Shopify - PullRequest
Новая
       21

Bootstrap аккордеон и конфликт Shopify

0 голосов
/ 02 июня 2019

Демонстрация аккордеонной панели Bootstrap сама по себе прекрасно работает на https://codepen.io/Sp00ky/pen/zBZZvq, но, похоже, возникает конфликт с Shopify, если я реализую коды, и я не уверен, как и где начать исправление.

Демо-страница Shopify: https://forestdev4.myshopify.com/pages/accordion-test Пароль магазина: accordion123

Другой разработчик предположил, что существует конфликт между этими двумя классами CSS, и мне нужно изменить HTML-код в Shopify, но я неуверен, как и где начать исправление.

И чтобы функция «Развернуть все / Свернуть все» продолжала работать, он предложил следующее: 

<script>
function openAllPanels() { console.log("setAllPanelOpen"); $(.accordion.accordion-close+div).show(); $(.accordion.accordion-close).removeClass('accordion-close').addClass('accordion-open'); }
</script>

<script>
$(document).ready(function() {

  $(".toggle-accordion").on("click", function() {
    var accordionId = $(this).attr("accordion-id"),
      numPanelOpen = $(accordionId + ' .collapse.in').length;

    $(this).toggleClass("active");

    if (numPanelOpen == 0) {
      openAllPanels(accordionId);
    } else {
      closeAllPanels(accordionId);
    }
  })

  openAllPanels = function(aId) {
    console.log("setAllPanelOpen");
    $(aId + ' .panel-collapse:not(".in")').collapse('show');
  }
  closeAllPanels = function(aId) {
    console.log("setAllPanelclose");
    $(aId + ' .panel-collapse.in').collapse('hide');
  }

});
</script>
...