JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Выпадающий на список JS</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 mt-5">
            <h1 class="text-center mb-4">Выпадающий на список JS</h1>
            <div class="app">
                <div class="dropdown" id="dropdown">
                    <div class="dropdown__label mx-auto"></div>
                    <div class="dropdown__info mx-auto"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

.dropdown {
    position: relative;
    width: 100%;
}

.dropdown__label {
    font-weight: 600;
    background: rgba(0, 0, 0, .15);
    width: 100%;
    max-width: 80%;
    padding: 10px 15px;
    border: 1px solid #484848;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}

.dropdown__label:hover {
    cursor: pointer;
    color: #F1EBEA;
    background: rgba(0, 0, 0, .4);
}

.dropdown__menu {
    display: none;
    width: 100%;
    max-width: 80%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    list-style: none;
    padding: 0;
    background: rgba(0, 0, 0, .15);
    border: 1px solid #484848;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.dropdown__menu li {
    padding: 5px 10px;
    -webkit-transition: all 0.55s;
    -moz-transition: all 0.55s;
    -ms-transition: all 0.55s;
    -o-transition: all 0.55s;
    transition: all 0.55s;
}

.dropdown__menu li:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.dropdown__menu li:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.dropdown__menu li:hover {
    background: rgba(0, 0, 0, .4);
    color: #F1EBEA;
    cursor: pointer;
}

.dropdown__info {
    margin-top: 100px;
    width: 100%;
    max-width: 80%;
}

.information {
    /*display: none;*/
    font-weight: 600;
    background: rgba(0, 0, 0, .15);
    padding: 10px 15px;
    border: 1px solid #484848;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}

.information a {
    color: rgba(101, 179, 76, 1);
    margin-left: 10px;
   ...

JavaScript

class Dropdown {
    constructor(selector, option) {
        document.querySelector('.dropdown__label').insertAdjacentHTML('afterEnd', `<ul class="dropdown__menu"></ul>`);

        this.$el = document.querySelector(selector);
        this.items = option.items;
        this.cities = option.cities;

        this.$el.querySelector('.dropdown__label').textContent = 'Выберите город';

        this.$el.addEventListener('click', event => {
            if (event.target.classList.contains('dropdown__label')) {
                if (this.$el.classList.contains('open')) {
                    this.close();
                } else {
                    this.open();
                }


            } else if (event.target.tagName.toLowerCase() === 'li' || event.target.tagName.toLowerCase() === 'a') {
                this.select(event.target.dataset.id);
            }
        });

        const itemsHTML = this.items.map(i => {
            return `<li data-id="${i.id}">${i.label}</li>`;
        }).join('');
        this.$el.querySelector('.dropdown__menu').insertAdjacentHTML('afterbegin', itemsHTML);
    }

    open() {
        this.$el.classList.add('open')
				this.$el.querySelector('.dropdown__info').innerHTML = ``;
    }

    close() {
        this.$el.classList.remove('open')
    }

    select(id) {
        const item = this.items.find(i => i.id === id);
        this.$el.querySelector('.dropdown__label').textContent = item.label;

        const cities = this.cities.find(i => i.id === id);
        this.$el.querySelector('.dropdown__info').innerHTML = `<div class="information">Узнать более подробно о городе: <a href="${cities.link}" target="_blank" rel="nofollow noopener" data-id="${cities.id}">${cities.label}</a></div>`;
        this.close();
    }

    // info_a(){
    //     this.$el.querySelector('.dropdown__info').classList.add('open');
    // }
    // info_r(){
    //     this.$el.querySelector('.dropdown__info').classList.remove('open');
    // }
}

const dropdown = new...