0

Не получается реализовать свайпер, у которого будет несколько выпадающих меню и у подпунктов будут свои слайды.

const selection = document.querySelector('.products__selection');
const subparagraphBlock = document.querySelector('.products__subparagraphBlock');


let selectedTd;
selection.addEventListener('click', function(event) {
  let target = event.target;

  if (target === selection) {
    return;
  };

  if (target.closest('.products__paragraphBlock')) {
    target.classList.add('active');
  };

  if (target.matches('.products__paragraph')) {
    subparagraphBlock.classList.remove('hidden');
  };

  highlight(target);
});


function highlight(td) {
  if (selectedTd) {
    selectedTd.classList.remove('active');
  }
  selectedTd = td;
  selectedTd.classList.add('active');
}
.products .active {
  background-color: #259cc1;
  border-radius: 7px;
  color: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.products__paragraphBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.products__paragraph {
  font-size: 24px;
}

.products__paragraph,
.products__subparagraph {
  cursor: pointer;
  padding: 5px 15px;
}

.products__subparagraphBlock {
  margin: 0 10px 0 0;
  border-right: 1px solid #333;
}

.products__subparagraph {
  display: inline-block;
  font-size: 18px;
  color: #333;
}

.products .hidden {
  display: none;
}
<div class="products__selection">
  <div class="products__paragraphBlock">
    <div class="products__paragraph">
      Paragraph 1
    </div>
    <div class="products__subparagraphBlock hidden">
      <div class="products__subparagraph">Subparagraph 1</div>
      <div class="products__subparagraph">Subparagraph 2</div>
      <div class="products__subparagraph">Subparagraph 3</div>
      <div class="products__subparagraph">Subparagraph 4</div>
    </div>
  </div>
  <div class="products__paragraphBlock">
    <div class="products__paragraph">
      Paragraph 2
    </div>
    <div class="products__subparagraphBlock hidden">
      <div class="products__subparagraph">Subparagraph 1</div>
      <div class="products__subparagraph">Subparagraph 2</div>
      <div class="products__subparagraph">Subparagraph 3</div>
      <div class="products__subparagraph">Subparagraph 4</div>
    </div>
  </div>
  <div class="products__paragraphBlock">
    <div class="products__paragraph">
      Paragraph 3
    </div>
    <div class="products__subparagraphBlock hidden">
      <div class="products__subparagraph">Subparagraph 1</div>
      <div class="products__subparagraph">Subparagraph 2</div>
      <div class="products__subparagraph">Subparagraph 3</div>
      <div class="products__subparagraph">Subparagraph 4</div>
    </div>
  </div>
</div>

2
  • 1
    клик на .products__selection, а где он?
    – Dias
    Commented 15 февр. 2022 в 18:35
  • Добавлен (Родитель) Commented 16 февр. 2022 в 9:14

1 ответ 1

1
    const selection = document.querySelector(".products__selection");
const subparagraphBlock = document.querySelectorAll(
  ".products__subparagraphBlock"
);
const allMainParagraphs = document.querySelectorAll(".products__paragraph");

allMainParagraphs.forEach(item => {
   item.addEventListener("click", () => {
      item.nextElementSibling.classList.toggle("hidden");
   });
})

Надеюсь, я помог вам

1
  • Несомненно, благодарю Commented 20 февр. 2022 в 11:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.