Всплывающее меню с выбирающимися пунктами и подпунктами

Question

Всем доброго времени Слайдер при выборе подпункта закрывает все подменю. Как сделать так, чтобы класс 'show' добавлялся пункту, на который кликнули, убирался у пункта, у которого уже есть этот класс, но не убирался, если кликнули на подменю.

const paragraphs = document.querySelectorAll('.products__paragraph'),
  subParagraphs = document.querySelectorAll('.products__subparagraphBlock'),
  slides = document.querySelectorAll('.products__slide');

let index = 0;
let selectos;

const activeSlide = n => {
  for (slide of slides) {
    slide.classList.remove('activeSlide');
  }
  slides[n].classList.add('activeSlide');
};

const activeParagraph = ind => {
  for (paragraph of paragraphs) {
    paragraph.classList.remove('active');
  }
  paragraphs[ind].classList.add('active');
};

const activeElems = (ind) => {
  activeParagraph(ind);
  activeSlide(ind);
};

const removerSub = td => {
  if (selectos) {
    selectos.classList.remove('show');
  }
  selectos = td;
  selectos.classList.add('show');
};

paragraphs.forEach((item, indexParagraph) => {
  item.addEventListener("click", () => {
    index = indexParagraph
    activeElems(index);
    if (item.matches('.last')) {
      return;
    };
    removerSub(item.nextElementSibling);
  });
});

&__paragraph {
  font-size: 18px;
  color: #333;
}

&__paragraph.withSub {
  font-size: 24px;
  color: #000;
}

&__paragraph.active {
  background-color: #259cc1;
  border-radius: 7px;
  color: #fff;
  transition: all 0.3s;
}

&__paragraph,
&__subparagraph {
  cursor: pointer;
  padding: 5px 15px;
}

&__subparagraphBlock {
  display: none;
}

&__subparagraphBlock.show {
  margin: 0 10px 0 0;
  border-right: 1px solid #333;
  display: flex;
  flex-direction: column;
}

<div class="products__paragraphBlock">
  <div class="products__paragraph withSub">
    Paragraph 1
  </div>
  <div class="products__subparagraphBlock show">
    <div class="products__paragraph">Subparagraph 1</div>
    <div class="products__paragraph">Subparagraph 2</div>
    <div class="products__paragraph">Subparagraph 3</div>
    <div class="products__paragraph last">Subparagraph 4</div>
  </div>
</div>
<div class="products__paragraphBlock">
  <div class="products__paragraph withSub">
    Paragraph 2
  </div>
  <div class="products__subparagraphBlock">
    <div class="products__paragraph">Subparagraph 1</div>
    <div class="products__paragraph">Subparagraph 2</div>
    <div class="products__paragraph">Subparagraph 3</div>
    <div class="products__paragraph last">Subparagraph 4</div>
  </div>
</div>


<div class="products__slide">
  <div class="products__img"></div>
  <div class="products__text">
    <p>Slide 1</p>
  </div>
</div>
<div class="products__slide">
  <div class="products__img"></div>
  <div class="products__text">
    <p>Slide 2</p>
  </div>
</div>
<div class="products__slide">
  <div class="products__img"></div>
  <div class="products__text">
    <p>Slide 3</p>
  </div>
</div>

Answer 1

У вас ошибка в структуре html, а следовательно будет ошибка в js.

products__paragraph - есть у главного заголовка и дочерних, вы вызываете удаление класса show у всех сразу, при нажатии на этот класс.

Вот пример кода реализации того, что вы хотите, единственно я использовал JQuery, но не думаю, что это создаст много проблем.

$('.item').click(function() {
    $('.item-active').removeClass('item-active')
    $(this).addClass('item-active')
})

.menu {
    display: flex;
    flex-direction: column;
}

.item {
    display: flex;
    background-color: grey;
    padding: 5px;
    cursor: pointer;
    flex-direction: column;
    margin: 5px;
}

.item-active {
    background-color: green;
}

.item-sub {
    height: 0;
    overflow: hidden;
}


.item-active > .item-sub {
    height: max-content;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
    <div class="item">
        <p>Paragraph  1</p>
        <div class="item-sub">
            <p>sub-Paragraph  1</p>
            <p>sub-Paragraph  1</p>
            <p>sub-Paragraph  1</p>
            <p>sub-Paragraph  1</p>
        </div>
    </div>
    <div class="item">
        <p>Paragraph  2</p>
        <div class="item-sub">
            <p>sub-Paragraph  2</p>
            <p>sub-Paragraph  2</p>
            <p>sub-Paragraph  2</p>
            <p>sub-Paragraph  2</p>
        </div>
    </div>
</div>

Надеюсь помог решить вашу проблему

Answer 2

Вот JS код этого Франкенштейна:

const paragraphs = document.querySelectorAll('.products__paragraph'),
    subParagraphs = document.querySelectorAll('.products__subparagraphBlock'),
    slides = document.querySelectorAll('.products__slide'),
    withSubs = document.querySelectorAll('.withSub');

let index = 0;
let subIndex = 0;

const activeSlide = n => {
    for (slide of slides) {
        slide.classList.remove('activeSlide');
    }
    slides[n].classList.add('activeSlide');
};

const activeParagraph = ind => {
    for (paragraph of paragraphs) {
        paragraph.classList.remove('active');
    }
    paragraphs[ind].classList.add('active');
};

const activeSubParagraph = index => {
    for (subParagraph of subParagraphs) {
        subParagraph.classList.remove('show');
    }
    subParagraphs[index].classList.add('show');
};

const activeElems = (ind) => {
    activeParagraph(ind);
    activeSlide(ind);
};

paragraphs.forEach((item, indexParagraph, subIndexParagraph) => {
    item.addEventListener("click", () => {
        index = indexParagraph
        activeElems(index);
    });
});

withSubs.forEach((item, subIndexParagraph) => {
    item.addEventListener("click", () => {
        subIndex = subIndexParagraph;
        console.log(subIndexParagraph);
        activeSubParagraph(subIndexParagraph);
    });
});

БЛОГ НА HUSL

Всплывающее меню с выбирающимися пунктами и подпунктами

Ответы (2 шт):