Bootstrap手风琴与Shopify冲突

时间:2019-06-02 12:04:53

标签: shopify accordion bootstrap-accordion

Bootstrap手风琴面板演示可以在https://codepen.io/Sp00ky/pen/zBZZvq上完美地运行,但是如果我实现代码并且不确定如何以及在哪里开始修复,似乎与Shopify有冲突。

Shopify演示页面:https://forestdev4.myshopify.com/pages/accordion-test店面密码:Accordion123

另一位开发人员建议两者的CSS类之间存在冲突,需要在Shopify中更改HTML代码,但是我不确定如何以及在何处开始修复。

并且要使“全部展开/全部折叠”功能仍然有效,他建议这样做:

<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>

0 个答案:

没有答案