Question

您好我是JS和HTML的新手。我正在研究这段代码。

HTML

<style>
.Hidden {
display:none;
}
.ExpandCollapse {
cursor:pointer;
float:left;
margin-right:5px;
width:8px;
}
.Folder {
}
</style>
<body>
<ul onclick="takeAction(event);">
<div id="Folder{0}" class="ExpandCollapse">+</div>
<div class="Folder">Click to expand 0
    <ul id="ExpandCollapseFolder{0}" class="Hidden">Hidden Text 0</ul>
</div>
<div id="Folder{1}" class="ExpandCollapse">+</div>
<div class="Folder">Click to expand 1
    <ul id="ExpandCollapseFolder{1}" class="Hidden">Hidden Text 1</ul>
</div>
</ul>
</body>

JS

function takeAction(e) {
var node = e.srcElement === undefined ? e.target : e.srcElement;
var id = node.getAttribute("id");
if (id !== null && id.indexOf("Folder") > -1) {
    if (node.innerHTML == "-") {
        node.innerHTML = "+";
        document.getElementById("ExpandCollapse" + id).style.display = "none";
    } else if (node.innerHTML == "+") {
        node.innerHTML = "-";
        document.getElementById("ExpandCollapse" + id).style.display = "block";
    }
}
}

已更新

每当我点击“+”符号时，它会扩展ID为“ExpandCollapseFolder {index}”的分区中的任何内容

我想要包含一个展开全部和一个全部折叠按钮。请提出修改建议。

Answer 1

我不是百分百肯定我明白你想要什么，但我猜它是这样的：

<script>
    function toggleIt(div) {
        var hiddenUl = document.getElementById('ExpandCollapse' + div.id);
        if (hiddenUl.getAttribute('class') == 'Shown') {
            hiddenUl.setAttribute('class', 'Hidden');
            div.innerHTML = '+';
        } 
        else {
            hiddenUl.setAttribute('class', 'Shown');
            div.innerHTML = '-';
        }
    }

    function toggleAll() {
        var toggles = document.querySelectorAll('div[onclick="toggleIt(this)"]');
        for (var i = 0; i < toggles.length; i++)
            toggleIt(toggles[i]);
    }
</script>

<style>
.Shown {
    display:block;
}
.Hidden {
display:none;
}
.ExpandCollapse {
cursor:pointer;
float:left;
margin-right:5px;
width:8px;
}
.Folder {
}
</style>
<body>
    <input type="button" onclick="toggleAll()" value="toggle all" />
    <br />

    <div id="Folder{0}" class="ExpandCollapse" onclick="toggleIt(this)">+</div>
    <div class="Folder">Click to expand 0
        <ul id="ExpandCollapseFolder{0}" class="Hidden">Hidden Text 0</ul>
    </div>

    <div id="Folder{1}" class="ExpandCollapse" onclick="toggleIt(this)">+</div>
    <div class="Folder">Click to expand 1
        <ul id="ExpandCollapseFolder{1}" class="Hidden">Hidden Text 1</ul>
    </div>
</body>

为每个toggle元素赋予它自己的onclick函数比在父节点中只有一个更容易。我希望这些代码行可以帮助你理解我的意思。

Answer 2

使用Jquery

HTML

<ul id='expandWrapper'>
    <div id="Folder{0}" class="ExpandCollapse">+</div>
    <div class="Folder">Click to expand 0
       <ul id="ExpandCollapseFolder{0}" class="Hidden">Hidden Text 0</ul>
    </div>
    <div id="Folder{1}" class="ExpandCollapse">+</div>
    <div class="Folder">Click to expand 1
        <ul id="ExpandCollapseFolder{1}" class="Hidden">Hidden Text 1</ul>
    </div>
</ul>


$('#expandWrapper').on('click','.ExpandCollapse',function(){
    var self = this;
    $($(this).parent().find('.Folder ul')).each(function(i,item){
        if($(item).attr('id').indexOf($(self).attr('id')) >0 )
        {
            $(item).toggle();
        }
    });
});

Fiddle

JS版

function takeAction(e) {
    var node = e.srcElement === undefined ? e.target : e.srcElement;
    var id = node.getAttribute("id");
    if (id !== null && id.indexOf("Folder") > -1) {
        if (node.innerHTML == "-") {
            node.innerHTML = "+";
            document.getElementById("ExpandCollapse" + id).style.display = "none";
        } else if (node.innerHTML == "+") {
            node.innerHTML = "-";
            document.getElementById("ExpandCollapse" + id).style.display = "block";
        }
    }
}

var ul = document.getElementById('expandWrapper');
ul.onclick = takeAction;

FIDDLE

展开全部并折叠js中的所有函数

2 个答案: