使用 Javascript 显示和隐藏元素

Question

所以我必须创建这个程序，我需要在其中创建一个“人们还要求”功能（默认情况下这将隐藏答案，如果单击问题，它将显示该特定问题的答案），但是我不知道如何使用我自己的 Display() 和 Answer() 函数隐藏和显示元素。由于我对 JavaScript 还很陌生，所以我很难过。

任何帮助将不胜感激！谢谢！

Answer 1

如果答案和问题相关，您可以在添加侦听器时循环它们以删除或添加具有display:none 属性的类。请参阅 sn-p。

const questions = document.querySelectorAll(".question");
const answers = document.querySelectorAll(".answer");
questions.forEach((question, index) => {
  question.addEventListener("click", () => {
    let answer = answers[index].classList;
    answer.contains("hidden") ? answer.remove("hidden") : answer.add("hidden");
  });
});

.hidden {
  display:none ;
}

<main>
  <h1>People also ask</h1>
  <ul id="questions">
    <li>
      <div class="question">
        How do I enable JavaScript Chrome?
      </div>
      <div class="answer hidden">
        <p><strong>If you'd like to turn JavaScript off or on for all sites:</strong></p>
        <ol>
          <li>Click the Chrome menu in the top right-hand corner of your browser.</li>
          <li>Select Settings.</li>
          <li>Click Show advanced settings.</li>
          <li>Under the "Privacy" section, click the Content settings button.</li>
        </ol>
      </div>

      <div class="question">
        What do you use JavaScript for?
      </div>
      <div class="answer hidden">
        <p><strong>Webpages</strong></p>
        <ol>
          <li>JavaScript is commonly used for creating web pages.
            It allows us to add dynamic behavior to the webpage and add special effects to the webpage.
            On websites, it is mainly used for validation purposes.
            JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors.
        </ol>
      </div>

      <div class="question">
        What does JavaScript do?
      </div>
      <div class="answer hidden">
        <p><strong>JavaScript</strong></p>
        <ol>
          <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.
            (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li>
        </ol>
      </div>

      <div class="question">
        Is it useful to learn JavaScript?
      </div>
      <div class="answer hidden">
        <p><strong>Why learn JavaScript?</strong></p>
        <ol>
          <li>The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer.
            Even if you haven't got your heart set on a tech career,
            being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today's job market!
        </ol>
      </div>
    </li>
</main>

Answer 2

正如您正确指出的那样，显示/隐藏元素的最佳方法是修改 CSS 属性 display。

现在，在您的情况下，我将添加一个 .hidden 类，您将其添加到要隐藏的元素中。然后要显示它们，您只需从相应元素中删除该类即可。

.hidden {
  display: none;
}

function toggleElementById(elementId) {
  var element = document.getElementById(elementId);
  element.classList.toggle("hidden");
}

如果为每个答案添加ID，并为问题添加目标属性，则可以轻松从问题元素中获取目标ID。

<div class="question" data-target="answer1">
  What does JavaScript do?
</div>
<div class="answer" id="answer1">
  <!-- ... -->
</div>

function toggleAnswer(e) {
  var target = e.target.getAttribute("data-target");
  toggleElementById(target);
}