Question

我正在使用此代码切换类的可见性，但一旦隐藏，元素就不会再次变为可见。看看我的demo。单击“1”，然后单击“全部”以显示所有项目。

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

Answer 1

问题是item-all是item-01，item-02和item-03的容器。如果您想要展示，请在隐藏item-01时item-all，你必须让它再次显示。

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

toggle_visibility('iconMap-3');

而不是

toggle_visibility('item-all');

DEMO

Answer 2

在查看代码并玩小提琴之后，很明显发生了什么。显示/隐藏所有按钮正在更改要显示的ul类，这会影响所有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>

点击全部

 <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>

点击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>

点击全部

<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>

切换类或可见性

2 个答案: