Question

在我的JS班上，我的任务是编辑FAQs应用程序，但一次只能显示一个答案。换句话说，当用户单击标题以显示文本时，其他答案必须隐藏。对于我的一生，我无法弄清楚要关闭其他标题需要做些什么。

   "use strict";
   var $ = function(id) { return document.getElementById(id); };

   // the event handler for the click event of each h2 element
   var toggle = function() {
    var h2 = this;                    // clicked h2 tag     
    var div = h2.nextElementSibling;  // h2 tag's sibling div tag

    // toggle plus and minus image in h2 elements by adding or removing a 
   class
    if (h2.hasAttribute("class")) { 
        h2.removeAttribute("class");    
    } else { 
        h2.setAttribute("class", "minus"); 
    }

    // toggle div visibility by adding or removing a class
    if (div.hasAttribute("class")) { 
        div.removeAttribute("class");
    } else { 
        div.setAttribute("class", "open"); 
    } 

   };

   window.onload = function() {
    // get the h2 tags
    var faqs = $("faqs");
    var h2Elements = faqs.getElementsByTagName("h2");

    // attach event handler for each h2 tag     
    for (var i = 0; i < h2Elements.length; i++ ) {
        h2Elements[i].onclick = toggle;
    }

HTML是：

    <h2><a href="#" >What is JavaScript?</a></h2>
    <div>
        <p>JavaScript is a browser-based programming language 
           that makes web pages more responsive and saves round trips to the server.
        </p>
    </div>
    <h2><a href="#">What is jQuery?</a></h2>
    <div>
        <p>jQuery is a library of the JavaScript functions that you're most likely 
           to need as you develop websites.
        </p>
    </div>
    <h2><a href="#">Why is jQuery becoming so popular?</a></h2>
    <div>
        <p>Three reasons:</p>
        <ul>
            <li>It's free.</li>
            <li>It lets you get more done in less time.</li>
            <li>All of its functions are cross-browser compatible.</li>
        </ul>

Answer 1

最简单的方法是从一个隐藏的类开始，假设在常见问题的内容上使用.hide，然后单击相关的内容，将.hide类删除，但在此之前，将其添加到再次所有元素。

<div id="faq">
  <h2>Question 1</h2>
  <p class="hide">Answer 1</p>

  <h2>Question 2</h2>
  <p class="hide">Answer 2</p>
</div>

const questions = document.querySelectorAll('#faq h2');
const answers = document.querySelectorAll('#faq p');


questions.forEach(q => q.addEventListener('click', e => {
 answers.forEach(a => a.classList.add('hide'));

 e.target.nextElementSibling.classList.remove('hide');
}))

p.hide {
  display: none;
}

您可以在此处签出代码： https://playcode.io/280470?tabs=console&index.html&output

Answer 2

类似的事情会起作用，而且非常简单。

const hideAll = () => document.querySelectorAll('.answer').forEach(e => e.classList.add('hide'));

document.addEventListener('click', (e) => {
  if(e.target.matches('a')) {
    hideAll();
    e.target.parentNode.nextElementSibling.classList.remove('hide');
  }
});

.hide {
  display: none;
}

<h2><a href="#">What is JavaScript?</a></h2>
<div class="answer">
  <p>JavaScript is a browser-based programming language that makes web pages more responsive and saves round trips to the server.
  </p>
</div >
<h2><a href="#">What is jQuery?</a></h2>
<div id="test" class="answer hide">
  <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop websites.
  </p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div class="answer hide">
  <p>Three reasons:</p>
  <ul>
    <li>It's free.</li>
    <li>It lets you get more done in less time.</li>
    <li>All of its functions are cross-browser compatible.</li>
  </ul>
</div>

一次打开一个标题

2 个答案: