切换类或可见性答案

【问题标题】：Toggling classes or visibility切换类或可见性
【发布时间】：2014-07-11 20:12:03
【问题描述】：

我正在使用此代码来切换类的可见性，但是一旦隐藏，元素就不会再次变得可见。看看我的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);
        }
    };
})();

【问题讨论】：

你的问题不清楚。您希望您的 Fiddle 做什么，而它目前没有做什么？
还有一个很大的 +1 用于解决您的第一个问题。
嗨，我更新了代码，见：DEMO

标签： javascript jquery toggle hide show

【解决方案1】：

问题在于item-all 是item-01、item-02 和item-03 的容器。如果你想显示，比如说item-01，当item-all 被隐藏时，你必须让它再次可见。

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

toggle_visibility('iconMap-3');

而不是

toggle_visibility('item-all');

DEMO

【讨论】：

【解决方案2】：

查看代码并玩弄小提琴后，很明显发生了什么。 Show/Hide all 按钮将 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>

【讨论】：