javascript - 使用 JS (ES6) 切换 Accordion /标签的问题

Question

我在使用以下 Accordion /标签布局时遇到一个小问题:

https://jsfiddle.net/drj3m5tg/

如您所见，在移动设备上打开和关闭其他选项卡时，右侧的“+”图标保持为“-”图标。在桌面 View 中，有时需要单击选项卡两次才能显示下面的内容。我检查了 chrome inspector，可以看到在再次单击之前不会删除事件类。有什么方法可以使用 JS 修复此行为吗？

const accordion = document.getElementsByClassName("accordion");
const panel = document.getElementsByClassName("panel");

for(let i = 0; i < accordion.length; i++){
  accordion[i].addEventListener('click', function(){
    removeOpen();
    // add active class to clicked element and open class to next slibling
    const toggleResult = this.classList.toggle('active');
    this.nextElementSibling.classList.toggle('panel-open', toggleResult);


  });
};

 // remove open class for all elements
function removeOpen (){
    for(let i = 0; i < panel.length; i++) {
       panel[i].classList.remove('panel-open');
    }
};

Answer 1

这是因为你必须删除 active另一个类accordion纽扣。当您这样做时，您将陷入另一个问题，即切换不再起作用。所以我建议你这样处理(重构整个事情):

(function() {                                                           // not really necessary (just to hide our variables from the outside scope)
    const accordion = document.getElementsByClassName("accordion");     // the .accordion buttons (no need for panels, we can get them using nextElementSibling)
    let current = -1;                                                   // the index of the current active accordion element (-1 indicate that currently no element is active)

    for (let i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function() {             // when clicking a .accordion element
            if (i !== current && current !== -1) {                      // if this is not the currently active element (i !== current), and if there is a currently active element (current !== -1)
                accordion[current].classList.remove('active');          // then desactivate the currently active element
                accordion[current].nextElementSibling.classList.remove('panel-open'); // ...
            }
            this.nextElementSibling.classList.toggle('panel-open');     // now toggle the current element
            current = this.classList.toggle('active') ? i : -1;         // ... (if this element is toggled on, then set current to be this element, if it is toggled off then set current to -1 as there will be no active elements)
        });
    };
})();

JSFiddle

编辑:

current持有一个值，该值是当前 accordion 的索引具有类 active 的元素.所以0 <= current < accordion.length .可能没有事件元素(所有 accordion 元素都已关闭)，因此我们需要一个值来表明这一点。该值不得在上述范围内。它可以是任何东西:null , false , "oompa loompa" , ... 因为它是通用的-1 (因为 indexOf 表示不存在)，我也选择了它。

至于我们为什么要使用它？。好吧，不是每次单击一个元素时都从所有元素中删除事件类，我们只跟踪事件元素，每次单击另一个元素时，我们只从一个元素中删除它们(其索引存储在 current 中) ).由于 current 也表示没有元素，我们必须先测试( current !== -1 )。

当一个元素被点击时，我们还想检查它是否不是事件元素(i !== -1)。因为如果我们不这样做，那么我们将删除 if 中的事件类和 toggle s 会将它们加回去。所以如果没有这个测试，当点击事件元素时，它会保持事件状态。