При нажатие на блок должен прилетать сверху список но он не появляется?

Question

[Gary__2001]

При нажатие на блок(drop__title) должен прилетать сверху список(drop__menu) но он не появляется, также у блока (drop__title) есть псевдо элемент (стрелочка), она должна переворачиваться на 180deg при прилете списка

<div class="drop__title">Товарные знаки</div>
                                <div class="drop__menu">
                                    <ul class="services__list">
                                        <li class="services__item">Все услуги</li>
                                        <li class="services__item services__item_active">Товарные знаки</li>
                                        <li class="services__item">Патенты</li>
                                        <li class="services__item">Дизайн</li>
                                        <li class="services__item">IT</li>
                                        <li class="services__item">Защита</li>
                                        <li class="services__item">Управление</li>
                                        <li class="services__item">Обучение</li>
                                    </ul>
                                </div>

.drop__title {
    display: block;
    max-width: 728px;
    width: 100%;
    padding: 10px 0 10px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    font-family: "Montserrat Regular", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: #FFFFFF;
}
.drop__title::after {
    content: url(../image/drop-menu__arrow.svg);
    position: absolute;
    top: 10px;
    right: 20px;
    -webkit-transition: all ease-in-out 0.5s 0s;
    transition: all ease-in-out 0.5s 0s;
}
.drop__menu {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all ease-in-out 0.5s 0s;
    background-color: rgba(68, 68, 68, 0.9);
    transform: translateY(-100%);
    z-index: 2;
}
.drop__menu.drop-active {
        transform: translateY(0);
    }
    .drop__menu.drop-active.drop__title::after {
        transform: rotate(180deg);
    }
    .services__list {
    box-sizing: border-box;
    display: grid;
    max-width: 728px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
    border-radius: 8px;
    background: #272727;
    z-index: 3;
    margin: 0 auto;
}

let dropBtn = document.querySelector('.drop__title');
let dropMenu = document.querySelector('.drop__menu');

dropBtn.addEventListener('click',function () {
    dropMenu.classList.toggle('.drop-active');
});

Comments

[Semantic.Moscow]

как же всё сложно.
почему не сделать просто:

<details><summary>Товарные знаки</summary>
 <ul class="services__list">
  <li class="services__item">Все услуги</li>
  <li class="services__item services__item_active">Товарные знаки</li>
  <li class="services__item">Патенты</li>
  <li class="services__item">Дизайн</li>
  <li class="services__item">IT</li>
  <li class="services__item">Защита</li>
  <li class="services__item">Управление</li>
  <li class="services__item">Обучение</li>
 </ul>
</details>

а состояние "открыто/закрыто" отлавливать через атрибут open (true/false)
вид маркера (стрелочка) ловите в summary:-webkit-details-marker и summary{list-style...}
чистенько, аккуратненько, предсказуемо и значительно меньше кодить (пара строк на ванильном js)

Answer 1

[TheSnegok]

У тебя логика нажимаешь на кнопку и должен менятся класс у '.drop__title' а потом ещё должен менятся класс у '.drop__menu' а ты меняешь класс только у '.drop__menu', и когда ты его меняешь посмотри какой у тебя класс там и через if можешь сравнивать здесь же для drop title и менять rotate, советую почитать о toggle и вообще о свойстве :active в CSS: toggle, active