Блог

Главная - Вопросы по программированию - Мне нужна ПОМОЩЬ в отключении выпадающих стилей для других вопросов, когда я нажимаю только на один из них

Мне нужна ПОМОЩЬ в отключении выпадающих стилей для других вопросов, когда я нажимаю только на один из них

#javascript #html #css #drop-down-menu #event-listener

#javascript #HTML #css #выпадающее меню #прослушиватель событий

Вопрос:

Я ввел необходимые элементы dom с помощью querySelectorAll(), я смог включать и отключать стили, которые я хочу для каждого отдельного выпадающего списка вопросов и ответов, когда я нажимаю, но я также хочу иметь возможность отключать выпадающие списки для любых других открытых вопросов, которые могут быть открыты, когда я нажимаю только на один.

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>

Ответ №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


          }
      });
    });
  });

Комментарии:

1. Я не совсем понял это таким образом, я изменил !== на === . а также использовал ту же идею перекрестной проверки dropdown.foreach с помощью q.queryselector(‘выпадающий список), чтобы также удалить классы CSS из невыбранных элементов. Я опубликую свое решение. Большое спасибо.

Ответ №2:

Благодаря предложению и помощи Брайана Грейса я смог найти способ переключать свойства 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');
          }
        });
      }
    });
  });
});

Хотя я чувствую, что код для этой операции должен быть намного меньше.