Javascript 切换类或可见性

我使用这段代码切换类的可见性，但一旦隐藏，元素就不再可见。看看我的眼睛。单击“1”，然后单击hidinh的“全部”并显示所有项目

var toggle_visibility = (function() {
    function toggle(cl) {
        var els = document.getElementsByClassName(cl);
        for(var i=0; i<els.length; ++i) {
            var s = els[i].style;
            s.display = s.display==='none' ? 'inline-block' : 'none';
        };
    }
    return function(cl) {
        if (cl instanceof Array) {
            for(var i=0; i<cl.length; ++i) {
                toggle(cl[i]);
            }
        }
        else {
            toggle(cl);
        }
    };
})();

var toggle_visibility=（函数（）{
功能切换（cl）{
var els=document.getElementsByCassName（cl）；
对于（var i=0；i而言，问题在于
item-all
是
item-01
、
item-02
和
item-03
的容器。如果要在
item-all
隐藏时显示
item-01
，则必须使其再次可见

根据您的代码和HTML使用的选项

toggle_visibility('iconMap-3');

而不是

toggle_visibility('item-all');

在查看代码并弹奏小提琴后，很明显发生了什么。Show/Hide all（显示/隐藏全部）按钮正在将ul类别更改为display（显示）或not（隐藏全部）按钮，这会影响所有li标记。如果在ul设置none（无），则会关闭整个列表，如果单击1、2或3，则列表项会分别打开和关闭显示。单击1、单击全部、单击3、单击全部。查看发生了什么？您正在使用不同级别的可见性

单击1

<ul class="item-all">
    <li class="iconMap-3 item-01" style="display:none;"/>1
    <li class="iconMap-3 item-02"/>2
    <li class="iconMap-3 item-03"/>3
</ul>


1
2
3


点击全部

 <ul class="item-all" style="display:none;">
    <li class="iconMap-3 item-01" style="display:none;"/>1
    <li class="iconMap-3 item-02"/>2
    <li class="iconMap-3 item-03"/>3
</ul>


1
2
3


点击3

<ul class="item-all" style="display:none;">
    <li class="iconMap-3 item-01" style="display:none;"/>1
    <li class="iconMap-3 item-02"/>2
    <li class="iconMap-3 item-03"  style="display:none;"/>3
</ul>


1
2
3


点击全部

<ul class="item-all">
    <li class="iconMap-3 item-01" style="display:none;"/>1
    <li class="iconMap-3 item-02"/>2
    <li class="iconMap-3 item-03"  style="display:none;"/>3
</ul>


1
2
3

您的问题不清楚。您希望您的小提琴做什么，而它目前没有做什么？以及为您的第一个问题提供一个大+1。您好，我更新了代码，请参阅：