Question

我刚发现这个有用的JS Toggle .. 可以修改这个吗？我只想展示实际选择的一个并隐藏所有其他的..

<script type="text/javascript">
function toggle(control){
var elem = document.getElementById(control);

if(elem.style.display == "none"){
    elem.style.display = "block";
}else{
    elem.style.display = "none";
}
}
</script>


<a href="javascript:toggle('test')"> link</a>
<br /><div id="test" style="display: none">text</div>

Answer 1

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script>
function show(idToShow, classToHide) {
    var classList = document.querySelectorAll('.'+classToHide);
    var thisElem  = document.getElementById(idToShow);
    var wasShown  = (thisElem.style.display == "block");

    var i = -1;
    while (node=classList[++i]) {
        node.style.display ="none";
    };

    if(!wasShown){
        thisElem.style.display = "block";
    }
}
</script>
</head>
<body>
    <div onclick="show('a','all');">A
        <div class="all" id="a" style="display:none">The stuff to show</div>
    </div>
    <div onclick="show('b','all');">B
        <div class="all" id="b" style="display:none">The stuff to show</div>
    </div>
    <div onclick="show('c','all');">C
        <div class="all" id="c" style="display:none">The stuff to show</div>
    </div>
</body>
</html>

获得IE 8支持是一场斗争，该版本不支持document.getElementsByClassName。似乎document.querySelectorAll 在IE 8中工作，但不是在怪癖模式下工作。修复了示例代码以使用它并使用标准模式。

注意：我第一次使用for循环而不是while：

    for (var i=0;i<classList.length;i++) {
        classList[i].style.display ="none";
    };

奖励积分如果你能发现这会失败（悬停鼠标看看答案）：

如果列表中有一个id为length的元素（在这种情况下classList.length将引用该元素，而不是NodeList的长度。）

JS Toggle show只点击一个并隐藏所有其他内容

1 个答案: