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

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');
          }
        });
      }
    });
  });
});

虽然感觉这个操作的代码应该少了很多

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

I need HELP in disabling dropdown styles for other questions when I click on just one of them

html

javascript

css

event-listener

drop-down-menu