scss 选择菜单JS类

Posted 2021-05-17

(function () {
  const App = {
    select: document.querySelector('[data="choose-select"]'),
    list: document.querySelector('[data="choose-list"]'),
    items: document.querySelectorAll('[data="choose-list"] li'),
    current: document.querySelector('[data="choose-select-current"]'),
  };

  App.init = function () {
    this.eventListener();
  };

  App.eventListener = function () {
    this.select.addEventListener('click', this.open.bind(this));
    this.items.forEach(item => item.addEventListener('click', this.close.bind(this)));
  };

  App.open = function () {
    this.select.classList.toggle('open');
    this.list.classList.toggle('open');
  };

  App.close = function (event) {
    const target = event.target;
    const parent = target.parentElement;
    this.select.classList.remove('open');
    this.list.classList.remove('open');

    this.currentCity(parent);
  };

  App.currentCity = function (element) {
    const cityName = element.querySelector('a').textContent;
    this.items.forEach(item => item.classList.remove('choose-city__item--current'));
    element.classList.add('choose-city__item--current');
    this.current.innerHTML = cityName;
  };

  App.init();
}());

<div class="choose-city">
                <div class="choose-city__select" data="choose-select">
                    <span class="choose-city__label">
                        Escolha a cidade
                        <i class="choose-city__icon fa fa-angle-down"></i>
                    </span>
                    <span class="choose-city__current" data="choose-select-current">
                        Porto Alegra
                    </span>
                </div>
                <ul class="choose-city__list" data="choose-list">
                    <li class="choose-city__item choose-city__item--current">
                        <a href="https://confraria.validaprojeto.com/#!" title="">Porto Alegra</a>
                    </li>
                    <li class="choose-city__item">
                        <a href="https://confraria.validaprojeto.com/#!" title="">Governador Valadares</a>
                    </li>
                    <li class="choose-city__item">
                        <a href="https://confraria.validaprojeto.com/#!" title="">Belo Horizonte</a>
                    </li>
                    <li class="choose-city__item">
                        <a href="https://confraria.validaprojeto.com/#!" title="">Rio de Janeiro</a>
                    </li>
                    <li class="choose-city__item">
                        <a href="https://confraria.validaprojeto.com/#!" title="">São Paulo</a>
                    </li>
                </ul>
            </div>

 .choose-city {
        width: 143px;
    }

    .choose-city__select {
        border: 0;
    }
    .choose-city {
    position: relative;
    font-size: 12px;
    width: 100%;

    &:hover .choose-city__label {
        opacity: .5;
    }
}

.choose-city__select {
    // border-top: 1px solid $color_shark_approx;
    // border-bottom: 1px solid $color_shark_approx;
    color: $color_saffron_approx;
    cursor: pointer;
    padding: 15px 0;

    &.open .choose-city__icon {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(180deg);
    }
}

.choose-city__label {
    display: block;
    text-transform: uppercase;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity .3s;
}

.choose-city__current {
    color: $color_spring_wood_70_approx;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.choose-city__list {
    background: $color_saffron_approx;
    left: 0;
    list-style: none;
    opacity: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translateY(-5px);
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: .3s;
    width: 100%;

    &.open {
        opacity: 1;
        visibility: visible;
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: translateY(0);
    }
}

.choose-city__icon {
    bottom: 2px;
    display: inline-block;
    font-size: 18px;
    margin-left: 5px;
    position: relative;
    vertical-align: middle;
}

.choose-city__item {
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: background .3s;

    a {
        align-items: center;
        color: $color_vulcan_approx;
        display: flex;
        padding: 0 15px;
        height: 40px;
    }
}

.choose-city__item--current {
    background: $color_saffron_approx;
}