当我只单击其中一个问题时，我需要帮助禁用其他问题的下拉样式

Question

我使用 querySelectorAll() 引入了必要的 dom 元素，当我单击时，我已经能够为每个单独的常见问题解答问题下拉列表启用和禁用我想要的样式，但我也希望能够禁用任何其他未解决问题的下拉列表当我只点击一个时可能会打开。

JS脚本

const questionContainer = document.querySelectorAll('.question');

function triggerDropdown() {
  questionContainer.forEach((q) => {
    const summary = q.querySelector('.summary'),
      img = q.querySelector('.img'),
      dropdown = q.querySelector('.dropdown');


    q.addEventListener('click', function () {
      img.classList.toggle('flip');
      summary.classList.toggle('bold');
      
      summary.classList.contains('bold')
        ? (dropdown.style.display = 'inline-block')
        : (dropdown.style.display = 'none');
    });
  });
}

要更改的 CSS 样式

.dropdown {
  display: none;
}

/* Activate with JS */
.bold {
  font-weight: 700;
  font-size: 13px;
}

.flip {
  transform: scaleY(-1);
}

HTML

      <div class="content">
        <h1>FAQ</h1>
        <br />
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
 ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
        ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
 ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
           ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></h1>
        <p class="dropdown">
          ANSWERS TO QUESTION
        </p>
      </div>

      </div>

Answer 1

基本上你可以遍历所有的下拉菜单：

const questionContainer = document.querySelectorAll('.question');
const dropdowns = document.querySelectorAll('.dropdown');

  questionContainer.forEach((q) => {
    const summary = q.querySelector('.summary'),
      img = q.querySelector('.img');

    q.addEventListener('click', function (event) {    
      img.classList.toggle('flip');
      summary.classList.toggle('bold');

      dropdowns.forEach (dropdown => {
          if (dropdown !== q.querySelector('.dropdown')) {
              // the dropdown that was clicked

              summary.classList.contains('bold')
                ? (dropdown.style.display = 'inline-block')
                : (dropdown.style.display = 'none');
          }
          else {
              // one of the other non-clicked dropdowns


          }
      });
    });
  });

Answer 2

在 Bryan Grace 的建议和帮助下，我找到了一种方法来切换下拉列表的 css 属性，同时删除未点击问题的相同属性。

基本上，我使用 forEach 遍历下拉菜单、箭头和摘要，以查看它是否与单击的项目匹配，如果不匹配，则删除 css 属性。

const questionContainer = document.querySelectorAll('.question');
const dropdowns = document.querySelectorAll('.dropdown');
const summaries = document.querySelectorAll('.summary');
const arrows = document.querySelectorAll('.img');

questionContainer.forEach((q) => {
  // individual variables for each question container
  const summary = q.querySelector('.summary'),
    qArrow = q.querySelector('.img');

  // Event Listener
  q.addEventListener('click', function () {
    qArrow.classList.toggle('flip');
    summary.classList.toggle('bold');

    dropdowns.forEach((dropdown) => {
      // If dropdown clicked matches dropdown iterated over enable dropdown properties
      if (dropdown === q.querySelector('.dropdown')) {
        summary.classList.contains('bold')
          ? (dropdown.style.display = 'inline-block')
          : (dropdown.style.display = 'none');

        //   If not a match, remove dropdown properties
      } else if (dropdown !== q.querySelector('.dropdown')) {
        dropdown.style.display = 'none';
        summaries.forEach((s) => {
          if (s !== summary) {
            s.classList.remove('bold');
          }
        });
        arrows.forEach((arrow) => {
          if (arrow !== qArrow) {
            arrow.classList.remove('flip');
          }
        });
      }
    });
  });
});

虽然我觉得这个操作的代码应该少很多。