Javascript可折叠菜单（隐藏其他元素）

Question

I have the following working Javascript function:

    function collapsible(zap) {
        if (document.getElementById) {
            var abra = document.getElementById(zap).style;
            if (abra.display == "block") {
                abra.display = "none";
            } else {
                abra.display = "block";
            }
            return false;
        } else {
            return true;
        }
}

When I use the following in html code it displays or hides the "element" div:

<li><a href="#" onclick="return collapsible('element');">Element</a></li>

Thats working fine. But the problem is, that I want to use the function for multiple links, and then the other elements, that were clicked before, stay, open.

How can I reprogram the code, so that only one div stays open and the other gets closed if i click on another link?

Thanks beforehand!

Answer 1

The way to go is to create a class(or maybe two), like collapsible and active or open that has this style(display: block or none) and then you working adding or removing the class.

The logic would be:

Links that has the class collapsible when clicked would add the active or open class which would give the behavior that remains opens(or active) by css.

If you want to hide others elements you would look for the elements with the class collapsible and then remove the active(or open) class if has any.

Answer 2

If you could use jQuery and more importantly jQueryUI accordion I think it would accomplish exactly what you're looking for.

However, without using those two, here is how I would structure it. Like mentioned above, I would use classes to modify the styles of the divs you want shown or hidden. Then the js code can just toggle those classes on each of your elements. The slightly more difficult part (without jquery) is modifying class values since in your final application you may have lots of classes on each div. This is just a very crude example to get you going.

Working JSFiddle Example

Sample DOM

<div >
    <li><a href="#" onclick="return collapsible('elem1');">Element1</a></li>
    <div id='elem1' class='myelem visible'>
        Element 1 contents
</div>
</div>
<div >
    <li><a href="#" onclick="return collapsible('elem2');">Element2</a></li>
    <div id='elem2' class='myelem'>
        Element 2 contents
    </div>
</div>
<div >
    <li><a href="#" onclick="return collapsible('elem3');">Element3</a></li>
    <div id='elem3' class='myelem'>
        Element 3 contents
    </div>
</div>

Sample JS

window['collapsible'] = function(zap) {
    if (document.getElementById)
    {
        var visDivs = document.getElementsByClassName('visible');
        for(var i = 0; i < visDivs.length; i++)
        {
            visDivs[i].className = visDivs[i].className.replace('visible','');
        }
        document.getElementById(zap).className += " visible";
        return false;
    }
    else
        return true;
}

Sample CSS:

.myelem {
    display: none;
}
.visible {
    display: block;
}

Answer 3

Here is my solution: http://jsfiddle.net/g5oc0uoq/

$('.content').hide();
$('.listelement').on('click', function(){
  if(!($(this).children('.content').is(':visible'))){
    $('.content').slideUp();
    $(this).children('.content').slideDown();
  } else {
    $('.content').slideUp();
  }
});

show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.