显示并通过JavaScript隐藏元素

时间：2019-02-03 10:54:56

标签： 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>

帮帮我...

4 个答案:

答案 0 :(得分：1)

确保仅将click eventlistener添加到标题，而不是所有元素！同样，在将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>

答案 1 :(得分：1)

您只需要选择所有已经.show并将它们更改为.hidden，然后最后将单击的标题子项更改为.show。这样，只有1个<ul>具有类show 

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

function show_article(e) {
  document.querySelectorAll('ul.show').forEach(ul=>{
    ul.className="hidden"
  })
  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 < div < article < main > ul{
  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>

答案 2 :(得分：0)

//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
let selectAllUL = Array.from(selectAllHeader).map(header =>  header.parentNode.querySelector('ul'));

function show_article(e) {
  
  let parent = e.target.parentNode.querySelector('ul') // selects ul
  
  selectAllUL.forEach(function(node) {
    node.classList.remove('show');
     node.classList.add('hidden');
     });
  parent.classList.add('show');
  parent.classList.remove('hidden');
}

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>

不是最优雅的解决方案。但是应该解决眼前的问题。

答案 3 :(得分：0)

您可以从所有元素中删除.show类，并用hidden替换它，只有完成后，才能将.show类添加到click元素中。

请参见下面的工作示例：

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

function show_article(e) {
  [...document.querySelectorAll('.show')].forEach(elem => {
    elem.classList.remove('show');
    elem.classList.add("hidden");
  });
  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>

相关问题
最新问题