Javascript 显示/隐藏页面上所有父/子div的JS代码

我有一个简单的JS用于显示/隐藏div：

function HideShow(e, itm_id) {
var tbl = document.getElementById(itm_id);
if (tbl.style.display == ""){
    e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
    tbl.style.display = "none"; }
else {
    e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
    tbl.style.display = ""; }
}

函数隐藏（e，itm_id）{
var tbl=document.getElementById（itm_id）；
如果（tbl.style.display==“”）{
e、 innerHTML=“”；
tbl.style.display=“无”；}
否则{
e、 innerHTML=“”；
tbl.style.display=”“；}
}

这是Codepen上代码的工作示例：

这是一个部分的示例：

<div id="activities" style="margin-bottom:50px;">
    <div style="color: #000; background: #eee; border-bottom:1px solid #ccc; padding:5px;">
        <h1 class="heading"><a href="javascript:;" onclick="HideShow(this,'parent_activities')"><i class='fa fa-minus' aria-hidden='true'></i></a> Activities <span style="color:#ccc;"></span></h1>
    </div>
        <div id="parent_activities" style="background: #fff; padding:20px;">
        <div id="activities__award-medal" style="background: #fff; padding-left:10px; background:#f1f1f1; border-top:1px solid #fff; font-size:30px;"><a href="javascript:;" onclick="HideShow(this,'child_award-medal')"><i class='fa fa-minus' aria-hidden='true'></i></a> award-medal <span style="color:#ccc;"></span></div>
        <div id="child_award-medal" style="background: #fff; padding:20px;">
            <ul class="gallery grid">
            <li>
                <a href="#">
                    <img title="military medal - You should use querySelectorAll() to select "IDs starting with...". This can be done like 
document.querySelectorAll('[id^="start_"]')
 and then you iterate through the elements applying the style to hide or show.


Check out this fiddle: https://jsfiddle.net/1c38dezk/
Try the following selector and apply:


document.querySelectorAll('[id^="child_"]')


活动
奖章


您应该使用来选择“ID以…”开头。这可以像
document.querySelectorAll（'[id^=“start”]'）
一样完成，然后迭代应用样式的元素以隐藏或显示

查看此小提琴：
尝试以下选择器并应用：

有关示例，请参见以下代码段：


function-toggleIdStartingWith（前缀='parent\'{
//选择以前缀开头的所有ID，并将此节点列表转换为数组
//所以我们以后可以很容易地循环。
var all=[…document.querySelectorAll（`[id^=“${prefix}]`]；
//确定是否要通过以下方式打开或关闭它们：
//正在检查第一个元素。您可能还需要检查
//如果在执行此操作之前找到任何元素。
var hidden=all[0]。style.display==“无”；
//将显示样式应用于所有。
all.forEach（元素=>{
element.style.display=隐藏？“”：“无”；
});
//返回反向隐藏值，这是我们应用的。
//如果您想切换内容，然后查看结果，这将非常有用
//在调用函数的代码中。
返回！隐藏；
}
//出于测试目的，我将两个按钮连接起来进行测试。
document.getElementById（'hideshow_parents'）。addEventListener（'click'，event=>{
event.preventDefault（）
event.target.textContent=toggleIdStartingWith（'parent_'））
“向所有家长展示”
：“隐藏所有家长”
})
document.getElementById（'hideshow_children'）.addEventListener（'click'，event=>{
event.preventDefault（）
event.target.textContent=toggleIdStartingWith（'child_'））
“显示所有儿童”
：“隐藏所有儿童”
})
Parent
小孩
父母亲
小孩
父母亲
小孩
父母亲
小孩
父母亲
小孩
隐藏/显示父母
隐藏/显示子项
注意：这不是一个完整的解决方案。目的是在让你暂停的部分中帮助你


尽量不要在HTML正文中嵌入JavaScript；这是不必要的标记，使跟踪和调试错误变得困难。我没有更改您现有的调用，但演示了如何使用较新的代码使用
addEventListener
您可以使用
document.queryselectoral
并查找您感兴趣的前缀（例如，
parent\u
，
child\u
）来确定元素的目标。要使用的前缀已添加到
数据选择器
属性中的链接中
因为切换操作不会转到另一个页面，所以应该是按钮或跨距
要隐藏元素，可以使用引导显示类，正如我使用的
d-none
表示显示无。Bootstrap库提供了这些功能，使响应性布局更加容易
许多内联CSS应该在类中，这是为了减少标记并使其更有组织

//因此forEach可用于'querySelectorAll'和'getElementsByClassName'集合
HTMLCollection.prototype.forEach=NodeList.prototype.forEach=Array.prototype.forEach；
函数隐藏（e，itm_id）{
var tbl=document.getElementById（itm_id）；
如果（tbl.style.display==“”）{
e、 innerHTML=“”；
tbl.style.display=“无”；
}否则{
e、 innerHTML=“”；
tbl.style.display=“”；
}
}
// -----------------------------------------------------------
//新代码
//新切换链接
let toggles=document.getElementsByClassName（'toggler'）；
//附加单击事件
toggles.forEach（link=>link.addEventListener（'click'，fnToggleElement））
//事件处理程序定义
函数fnToggleElement（）{
让elements=document.querySelectorAll（`id^=“${this.dataset.selector}”]`）
让className='d-none'
elements.forEach（el=>{
让fas=el.parentElement.closest（'.item、.sub-container、.menu-container'）。queryselectoral（'.fa'））
if（el.classList.contains（className））{
el.classList.remove（className）
fas.forEach（fa=>{
fa.classList.remove（'fa-plus'）
fa.classList.add（'fa-减号'）
})
}否则{
el.classList.add（类名称）
fas.forEach（fa=>{
fa.classList.remove（'fa-减号'）
fa.classList.add（'fa-plus'）
})
}
})
}
.menu容器{
边缘底部：50px；
}
.分箱{
填充：20px；
}
.标题{
颜色：#000；
背景：#eee；
边框底部：1px实心#ccc；
填充物：5px；
}
.缩进{
背景：#fff；
填充：20px；
}
.图标{
宽度：64px；
高度：64px；
}
.项目{
背景：#fff；
左侧填充：10px；
背景#f1f1；
边框顶部：1px实心#fff；
字体大小：30px；
}
.扳机{
光标：指针；
显示：内联块；
}
.画廊{
宽度：100%；
*宽度：99.94877049180327%；
保证金：0；
填充：0；
}
李先生{
保证金：2p5px；
}
李先生{
保证金：2p5px；
显示：块；
}
.gallery.grid李：悬停{
背景：#ccc；
}
李先生{
显示：内联块；
边框顶部：1px实心#eee；
右边框：1px实心#ccc；
边框底部：1px实心#ccc；
左边框：1px实心#eee；
填充：6px；
位置：相对位置；
-moz框大小：边框框；
边界半径：3px 3px 3px 3px；
背景：#fff；
}
a画廊{
显示：块；
}

切换父母
切换孩子
活动