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>