时间戳

首页 > 解决方案 > 通过 Javascript 显示和隐藏元素

javascript - 通过 Javascript 显示和隐藏元素

问题描述

在下面给出的代码中，我想包含显示和隐藏功能。
我的代码中有三个带有无序列表的标题标签。默认情况下，所有无序列表都是隐藏的。
当我单击第一个标题时，它会显示其相应的无序列表。
之后，如果我单击第二个/第三个标题，则它不会隐藏以前打开的无序列表。

我想要什么：单击标题时，以前打开的unordered list不能显示。

尝试通过运行以下代码来理解我的问题。

//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');

function show_article(e) {
  let parent = e.target.parentNode.children[1]; // selects ul
  parent.className = "show";
}

for (let i = 0; i < selectAllHeader.length; i++) {
  addEventListener('click', show_article);
}
/* CSS */

article {
  float: left;
}

article:nth-child(2n) {
  background-color: lightsteelblue;
}

article:nth-child(2n) header {
  background-color: #7b9dc9;
}

article:nth-child(odd) {
  background-color: lightpink;
}

article:nth-child(odd) header {
  background-color: #e595a1;
}

header {
  padding: 10px;
  cursor: pointer;
}

ul {
  list-style-type: circle
}

ul li {
  margin-bottom: 40px;
}

ul.hidden {
  display: none;
}

ul.show {
  display: inline-block;
}
<!-- HTML -->
<main>
  <!--article 1 -->
  <article id="a1">
    <div>
      <header>
        NANO AREA
      </header>
      <ul class="hidden">
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>

      </ul>

    </div>
  </article>

  <!--article 2 -->
  <article id="a2">
    <div>
      <header>
        GEDIT AREA
      </header>
      <ul class="hidden">
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
      </ul>
    </div>

  </article>

  <!--article 3 -->
  <article id="a3">
    <div>
      <header>
        TEXTMATE AREA
      </header>


      <ul class="hidden">
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
      </ul>
    </div>
  </article>

</main>

帮我...

标签： javascript

解决方案

确保只将点击事件监听器添加到标题，而不是所有元素！此外，在将show类添加到属于标题的 ul 之前，首先从其他标题的 ul 中删除所有其他显示类。我还将显示类的添加更改为切换显示类，因此第二次单击相同的标题菜单再次关闭：

//JAVASCRIPT
var selectAllHeader = document.querySelectorAll('header');

function show_article(e) {
    for (let i = 0; i < selectAllHeader.length; i++) {
        selectAllHeader[i].parentNode.children[1].classList.remove("show");
    }
    let parent = e.target.parentNode.children[1]; // selects ul
    parent.classList.toggle("show");
}

for (let i = 0; i < selectAllHeader.length; i++) {
   selectAllHeader[i].addEventListener('click', show_article);
}
/* CSS */

article {
  float: left;
}

article:nth-child(2n) {
  background-color: lightsteelblue;
}

article:nth-child(2n) header {
  background-color: #7b9dc9;
}

article:nth-child(odd) {
  background-color: lightpink;
}

article:nth-child(odd) header {
  background-color: #e595a1;
}

header {
  padding: 10px;
  cursor: pointer;
}

ul {
  list-style-type: circle
}

ul li {
  margin-bottom: 40px;
}

ul.hidden {
  display: none;
}

ul.show {
  display: inline-block;
}
<!-- HTML -->
<main>
  <!--article 1 -->
  <article id="a1">
    <div>
      <header>
        NANO AREA
      </header>
      <ul class="hidden">
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>

      </ul>

    </div>
  </article>

  <!--article 2 -->
  <article id="a2">
    <div>
      <header>
        GEDIT AREA
      </header>
      <ul class="hidden">
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
      </ul>
    </div>

  </article>

  <!--article 3 -->
  <article id="a3">
    <div>
      <header>
        TEXTMATE AREA
      </header>


      <ul class="hidden">
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
        <li>Lorem ipsum dolor </li>
      </ul>
    </div>
  </article>

</main>

推荐阅读