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

Question

我有一些简单的 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 = ""; }
}

这是 Codepen 上代码的一个工作示例:Show Hide Divs without jQuery

这是一个部分的示例:

<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 - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg" style="width:64x; height:64px" role="presentation">
                </a>
            </li>
            </ul>
        </div>
        <div id="activities__event" style="background: #fff; padding-left:10px; background:#f1f1f1; border-top:1px solid #fff; font-size:30px;"><a href="javascript:;" onclick="HideShow(this,'child_event')"><i class='fa fa-minus' aria-hidden='true'></i></a> event <span style="color:#ccc;"></span></div>
        <div id="child_event" style="background: #fff; padding:20px;">
            <ul class="gallery grid">
            <li>
                <a href="#">
                    <img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" style="width:64x; height:64px" role="presentation">
                </a>
            </li>
            </ul>
        </div>
    </div>
</div>

顶级示例的 ID 为 parent_activities，然后有两个子值:

1. child_award-medal
2. child_event

我想知道如何添加两个链接:

1. 为父级切换 HideShow 函数的链接，以便显示/隐藏 ID 以 parent_ 开头的所有 div
2. 用于切换子项的 HideShow 函数的链接，以便显示/隐藏 ID 以 child_ 开头的所有 div

虽然我不确定我会怎么做。

非常感谢任何建议。谢谢

Answer 1

注意:这不是一个完全完整的解决方案。目的是帮助您解决让您停顿的部分。

---

1. 尽量不要在 HTML 正文中嵌入 JavaScript；这是不必要的标记，并且很难追踪和调试错误。我没有更改您现有的调用，但演示了如何通过将 addEventListener 与较新的代码一起使用来完成它
2. 您可以使用 document.querySelectorAll 定位您的元素并查找您感兴趣的前缀(例如，parent_、child_) . data-selector 属性中的链接添加了哪些前缀
3. 因为切换操作不会转到另一个页面，所以这些应该是按钮或 span
4. 要隐藏元素，您可以使用 Bootstrap 显示类，因为我使用了 d-none，它代表不显示。 Bootstrap 库提供了这些，使响应式布局变得特别容易
5. 许多内联 CSS 应该放在类中，这样既可以减少标记，又可以使其更有条理

// So forEach can be used on 'querySelectorAll' and 'getElementsByClassName' collections
HTMLCollection.prototype.forEach = NodeList.prototype.forEach = Array.prototype.forEach;


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 = "";
  }
}


// -----------------------------------------------------------
// NEW Code


// New toggle links
let toggles = document.getElementsByClassName('toggler');

// Attach click event
toggles.forEach(link => link.addEventListener('click', fnToggleElement))

// Event handler definition
function fnToggleElement() {
  let elements = document.querySelectorAll(`[id^="${this.dataset.selector}"]`)
  let className = 'd-none'
  elements.forEach(el => {
    let fas = el.parentElement.closest('.item,.sub-container,.menu-container').querySelectorAll('.fa')
    if (el.classList.contains(className)) {
      el.classList.remove(className)
      fas.forEach(fa => {
        fa.classList.remove('fa-plus')
        fa.classList.add('fa-minus')
      })
    } else {
      el.classList.add(className)
      fas.forEach(fa => {
        fa.classList.remove('fa-minus')
        fa.classList.add('fa-plus')
      })
    }
  })
}

.menu-container {
  margin-bottom: 50px;
}

.sub-container {
  padding: 20px;
}

.heading {
  color: #000;
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}

.indent {
  background: #fff;
  padding: 20px;
}

.icon {
  width: 64px;
  height: 64px;
}

.item {
  background: #fff;
  padding-left: 10px;
  background: #f1f1f1;
  border-top: 1px solid #fff;
  font-size: 30px;
}

.toggler {
  cursor: pointer;
  display: inline-block;
}

.gallery {
  width: 100%;
  *width: 99.94877049180327%;
  margin: 0;
  padding: 0;
}

.gallery.grid li {
  margin: 2px 5px;
}

.gallery.grid li {
  margin: 2px 5px;
  display: block;
}

.gallery.grid li:hover {
  background: #ccc;
}

.gallery.grid li {
  display: inline-block;
  border-top: 1px solid #eee;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #eee;
  padding: 6px;
  position: relative;
  -moz-box-sizing: border-box;
  border-radius: 3px 3px 3px 3px;
  background: #fff;
}

.gallery a {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-sm"><span class="toggler btn-link" data-selector="parent_">Toggle Parents</span></div>
    <div class="col-sm"><span class="toggler btn-link" data-selector="child_">Toggle Children</span></div>
  </div>
</div>

<div class="container-fluid">
  <div id="activities" class="menu-container">
    <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 id="parent_activities" class="sub-container">
      <div id="activities__award-medal" class="item">
        <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" class="indent">
        <ul class="gallery grid">
          <li>
            <a href="# ">
              <img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg " class="icon" role="presentation">
            </a>
          </li>
        </ul>
      </div>
      <div id="activities__event " class="item">
        <a href="javascript:; " onclick="HideShow(this, 'child_event') ">
          <i class='fa fa-minus' aria-hidden='true'></i>
        </a> event
        <span style="color:#ccc; "></span>
      </div>
      <div id="child_event " class="indent">
        <ul class="gallery grid ">
          <li>
            <a href="# ">
              <img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" class="icon" role="presentation">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div id="animals-nature" class="menu-container">
    <h1 class="heading"><a href="javascript:;" onclick="HideShow(this, 'parent_animals-nature')"><i class='fa fa-minus' aria-hidden='true'></i></a> Animals & Nature <span style="color:#ccc;"></span></h1>
    <div id="parent_animals-nature" class="sub-container">

      <div id="animals-nature__animal-amphibian " class="item ">
        <a href="javascript:;" onclick="HideShow(this, 'child_animal-amphibian')">
          <i class='fa fa-minus' aria-hidden='true'></i>
        </a> animal-amphibian
        <span style="color:#ccc;"></span>
      </div>
      <div id="child_animal-amphibian" class="indent">
        <ul class="gallery grid">
          <li>
            <a href="# ">
              <img title="frog face - 🐸 " src="https://cdn.jsdelivr.net/emojione/assets/svg/1f438.svg " style="width:64x; height:64px " role="presentation ">
            </a>
          </li>
        </ul>
      </div>

      <div id="animals-nature__animal-bird " class="item">
        <a href="javascript:;" onclick="HideShow(this, 'child_animal-bird')">
          <i class='fa fa-minus' aria-hidden='true'></i>
        </a> animal-bird
        <span style="color:#ccc;"></span>
      </div>
      <div id="child_animal-bird" class="indent">
        <ul class="gallery grid">
          <li>
            <a href="# ">
              <img title="turkey - 🦃 " src="https://cdn.jsdelivr.net/emojione/assets/svg/1f983.svg " style="width:64x; height:64px " role="presentation ">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>