Выпадающей список выбор языка на js css

Question

Написал код для выбора языка. Проблема в том, что в js по клику, не всегда приходит элемент li. Нужно сделать так, чтоб по клику раскрывался выбор и после выбора выбранный элемент стал первым. Знаю что есть библиотека custom-select, но ради одного элемента не хочу подключать её. Вот мой код, что не так?

    const lengOptions = document.querySelector('.top-block_item__leng');

    lengOptions.classList.remove('active'); 
    
    document.addEventListener('click', function(e){
    console.log(e.target.className)
    if(e.target.className == "top-block_leng-items" || e.target.className == "top-block_leng_lincks_options" || e.target.className == "icon-arrow-down-up icon-arrow-down-up__leng"){
        lengOptions.classList.toggle('active');

        
    if(e.target.className == "top-block_leng-items"){
        document.querySelector('.top-block_leng').append(document.querySelector("."+e.target.className))

    }
    }else{

        lengOptions.classList.remove('active');
    }
    


    })

.top-block_item__leng
    position: relative
    width: 62px
    cursor: pointer
    .icon-arrow-down-up__leng
        right: 0
        top: 46px
        z-index: 2
    &.active
        .top-block_leng
            height: 100px
            background-color: lighten($bgpage,3%) 
        .top-block_leng-items
            background-color: lighten($bgpage,3%) 
            &:hover
                text-decoration: none
                background-color: darken($bgpage,6%) 
                color: $head
.top-block_leng
    padding: 0
    margin: 0
    position: absolute
    right: -13px
    top: 26px
    display: table-cell
    vertical-align: middle
    z-index: 1
    width: 84px
    overflow: hidden
    height: 44px

.top-block_leng-items
    list-style: none
    margin-bottom: 13px
    display: flex
    width: 100%
    align-items: center
    font-size: 12px
    text-decoration: none
    color: $head
    height: 44px
    padding: 11px 0 11px 10px

.top-block_leng_lincks 
    display: block
    margin-right: 6px
    img
        width: 21px
    .top-block_leng_lincks_options
        display: block

                <div data-da=".burger,1197,2 " class="top-block_item top-block_item__leng top-block_item__blocks">
                    <i class="icon-arrow-down-up icon-arrow-down-up__leng"></i>
                    <ul class="top-block_leng">
                        <li class="top-block_leng-items"><a href="" class="top-block_leng_lincks"><img src="images/dist/RU.png" alt="Русский язык"></a><span class="top-block_leng_lincks_options">Ru</span></li>
                        <li class="top-block_leng-items"><a href="" class="top-block_leng_lincks"><img src="images/dist/UZ.png" alt="Узбекский язык"></a><span class="top-block_leng_lincks_options">Uz</span></li>
                    </ul>
                </div>
            </div>

БЛОГ НА HUSL

Выпадающей список выбор языка на js css

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