Один курс открыт за один раз - PullRequest
Новая
       21

Один курс открыт за один раз

0 голосов
/ 02 апреля 2019

В моем классе JS мне было поручено редактировать приложение часто задаваемых вопросов, за исключением того, что одновременно может отображаться только один ответ.Другими словами, когда пользователь нажимает на заголовок для отображения текста, остальные ответы должны быть скрыты.Что касается жизни, я не могу понять, что мне нужно сделать, чтобы закрыть другие заголовки.

   "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>

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Самый простой способ - начать со скрытого класса, скажем, .hide для содержимого faq, а затем щелкнуть по соответствующему классу, удалить класс .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

0 голосов
/ 02 апреля 2019

Примерно так будет работать и довольно просто. 

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>
...