以显示/隐藏方式切换两个以上的 div

Question

我有10个不同的div和10个按钮。我可以很容易地切换（隐藏/可见）它们：

 <script>
    function fun(x)
    {        
    document.getElementById(x).style.visibility = 
    (document.getElementById(x).style.visibility != "visible") ? "visible" : "hidden";
    }
    </script>
    <div id="div1" style="visibility:hidden">div1</div><input type="button" value="click" onclick="fun('div1')">
    <div id="div2" style="visibility:hidden">div2</div><input type="button" value="click" onclick="fun('div2')">

现在我想做的是：比如说，div1已经可见，点击button2，div2和所有其他div（div1，div3，…div10）都会被隐藏，如果其中一个已经在点击button2中可见，以此类推。我该怎么办？

Answer 1

检查小提琴：http://jsfiddle.net/BJ6bW/2/

在运行fun（）之前添加重置功能

function reset(x) {
    Array.prototype.slice.call(document.querySelectorAll('div')).forEach(function (element) {
        if (element.id == x) {
            return false;
        }
        element.style.visibility = 'hidden';
    });
}
function fun(x) {
    reset(x);
    document.getElementById(x).style.visibility = (document.getElementById(x).style.visibility != "visible") ? "visible" : "hidden";
}