如何重用我的代碼在點擊時打開 Accordions

Question

我目前正在使用以下 JS 在單擊<a>標記時打開手風琴。 它使用數據觸發值來確定要使用的<a> 。

    <script type="text/javascript">
    $('[data-trigger="accordion"]').on('click', function(e) {
        var obj = $(this),
            accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
            accordionPanels = $('.content.1', '[data-accordion]');

        if (obj.hasClass('toggle-open')) {
            accordionButtons.removeClass('active');
            accordionPanels.removeClass('active');
            obj.removeClass('toggle-open');
        } else {
            accordionButtons.addClass('active');
            accordionPanels.addClass('active');
            obj.addClass('toggle-open');
        }
        $('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
        window.location.href = "#" + anchor;
        e.preventDefault();
    });
</script>

上面的 JS 將打開一個基於它的 class 的手風琴。 以下是用於打開 Accordion 的鏈接示例：

<a href="#protect-the-nhs" data-trigger="accordion">

打開手風琴時引用的代碼示例：

<div id="protect-the-nhs" class="content 1">

我想知道是否有人可以幫助我更改此代碼，以便我可以為頁面上的每個 Accordion 重用它。 讓我解釋。 該頁面有 5 個不同的手風琴，上面我對數據觸發器和手風琴 class “內容 1”使用了通用命名。

我想知道是否有可能以某種方式制作它，以便我可以為每個不同的手風琴使用此代碼（例如，手風琴 1 將具有“內容 1”的 class，手風琴 2 將具有“內容 2”的 class " 等等。但是，對於每個手風琴，您還必須單擊不同的鏈接才能打開手風琴。

例如：Accordion one 將依賴帶有data-trigger="accordion1"的<a>標記，它會打開帶有class="content 1"的手風琴。

我希望有人能理解我的要求並可能提供幫助。 我試圖為此尋找一些東西，但沒有找到任何東西。 我還在學習JS所以TIA。

謝謝。

Answer 1

我的基本想法是聽整個文檔，確定點擊的位置並激活正確的手風琴

請注意：我假設每個accordion后面都有一個數字，對應於像accordion1 content 1這樣的內容類

document.onclick=function(e) {
    if(!e.path[0].dataset.trigger){return;} //i forgot that not every element has a data-trigger
    if(!e.path[0].dataset.trigger.startsWith('accordion')){return;} //listening to the whole document needs you have to ensure you aren't activating when you don't need to
    var n=e.path[0]["data-trigger"].split('accordion')[1]
    alert(n)
    var obj = e.path[0],
        accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
        accordionPanels = $(`.content.${n}`, '[data-accordion]');

    if (obj.hasClass('toggle-open')) {
        accordionButtons.removeClass('active');
        accordionPanels.removeClass('active');
        obj.removeClass('toggle-open');
    } else {
        accordionButtons.addClass('active');
        accordionPanels.addClass('active');
        obj.addClass('toggle-open');
    }
    $('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
    window.location.href = "#" + anchor;
    e.preventDefault();
}