用纯JS和for循环滑动手风琴

Question

我写了一个 for 循环，它应该运行遍历所有手风琴及其子项，但我不明白为什么它只对第一个对象有效。

for (
    var i = 0,
    accordion = document.getElementsByClassName('accordion');
    i < accordion.length;
    i++
) {
    var accordion_section = accordion[i].children[i],
        accordion_key = accordion[i].children[i].children[0],
        accordion_bellow = accordion[i].children[i].children[1];

    function accordion_bellow_MarginTop( value ) {
        accordion_bellow.style.marginTop = value + 'px';
    }
    accordion_bellow_MarginTop( -accordion_bellow.offsetHeight );

    accordion_key.onclick = function() {
        if ( accordion_section.getAttribute('class' ) == 'active' ) {
            accordion_section.setAttribute('class', '');
            accordion_bellow_MarginTop( -accordion_bellow.offsetHeight );
        }
        else {
            accordion_section.setAttribute('class', 'active');
            accordion_bellow_MarginTop( 0 );
        }
        return false;
    }
}

Answer 1

你需要先在里面再做一个循环

通过这种方式，您可以获得所有手风琴和每个手风琴的所有部分

试试这个：

for (i = 0,
     accordion = document.getElementsByClassName('accordion');
    i < accordion.length;
    i++) {

    for (j = 0;
        j <= accordion[i].children.length;
        j++) {


              //your code here

     }
}

Answer 2

这里有几个问题。正如之前的评论者所指出的，您没有正确地遍历手风琴中的每个部分。修复该问题后，您还需要解决您的 onClick 处理程序无法正常工作的问题。

循环遍历每个部分的问题是您使用了不正确的变量范围。所发生的只是您循环的最后一个元素会受到点击处理程序的影响。这是因为变量 "accordion_section" 和 "accordion_bellow" 将始终引用主 for 循环中的最后一组元素。

这与它们将是循环期间分配的唯一元素的预期相反。这是因为变量 "accordion_section" 和 "accordion_bellow" 定义在 onClick 函数的范围之外。为了让您的 onClick 工作，这些变量需要在您的 for 循环的每次迭代期间在单独的范围内定义。

为此，您可以使用这样的匿名函数：

for (var i = 0; i < sections.length; i++) 
{
    (function() {
        var section = sections.item(i),
            anchor = sections.item(i).children[0],
            below = sections.item(i).children[1];

        closeBelow(below, -below.offsetHeight);

        anchor.onclick = function () {
            if (section.getAttribute('class' ) == 'active' ) {
                section.setAttribute('class', '');
                closeBelow(below);
            }
            else {
                section.setAttribute('class', 'active');
                openBelow(below);
            }
        }
    })();
}

在此解决方案中，变量 "section"、"anchor" 和 "below" 始终特定于您正在循环的元素。通过使用自执行函数，您可以确保每个点击处理程序仅适用于局部范围的变量。

解决方案：http://jsfiddle.net/b0u916p4/4/

用纯JS和for循环滑动手风琴

Sliding accordion with pure JS and for loop

javascript

css

native

accordion