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

Question

I've written a for loop, which should run through all accordions and their children, but I can't figure out why it's only working on the first object.

Fiddle Example

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

There are a couple of issues at play here. As previous commenters noted, you are not properly looping over each of the sections within your accordion. After fixing that, you will also need to address the fact that your onClick handler will not work correctly.

The problem with looping over each section is that you are using improper variable scoping. What happens is only the last element you loop over will be affected by the click handler. This is because the variables "accordion_section" and "accordion_bellow" will always reference the last set of elements in your main for loop.

This is contrary to the expectation that they will be the unique element assigned during the loop. The reason for this is because the variables "accordion_section" and "accordion_bellow" are defined outside the scope of the onClick function. In order for your onClick to work, those variables need to be defined within a separate scope during each iteration of your for loop.

In order to do this, you can use an anonymous function like this:

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);
            }
        }
    })();
}

In this solution, the variables "section", "anchor", and "below" are always specific to the elements you are looping over. By using a self-executing function, you ensure that each click handler only works with locally scoped variables.

Solution: http://jsfiddle.net/b0u916p4/4/

Answer 2

you need to make another loop inside first

this way you get all accordion and all sections of each

try this:

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

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


              //your code here

     }
}