JSFiddle - React, Tailwind, and code Playground

by ilinei52

HTML

<div class="iie-btn btn-dropdownbox" id="nameMyButton" data-iddropdownbox="nameMyDropdowbox">
   Открыть
</div>
<div class="iie-dropdowbox" id="nameMyDropdowbox">
    <select>
       <option value=1>{значение 1}</option>
       <option value=2>{значение 2}</option>
       <option value=3>{значение 3}</option>
       <option value=4>{значение 4}</option>
    </select> <br>
    <select>
       <option value=1>{значение 1}</option>
       <option value=2>{значение 2}</option>
       <option value=3>{значение 3}</option>
       <option value=4>{значение 4}</option>
    </select>
</div>
<br> 
<div class="iie-btn btn-dropdownbox" id="nameMyButton" data-iddropdownbox="newMyDropdowbox">
   Открыть новый
</div>
<div class="iie-dropdowbox" id="newMyDropdowbox">
   новый блок
</div>

CSS

/* стиль кнопки */
.iie-btn {
    border:1px solid silver; /*бордюр кнопки*/
    /* width:60px; ширина кнопки*/
    height:30px; /* высота кнопки*/
    text-align:center; /* позицианируем текст по центру по горезонтали */
    /* начало позиционирование текста по вертикали */
    line-height:30px;
    vertical-align:50%;
    /* конец позиционирование текста по вертикали */
    background: #7db9e8; /*фон кнопки*/
    /*начало шрифт*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    /*конец шрифт*/
    display: table; /*отображает див как ячейку по размеру контента*/
    padding-left:10px; /*внутренний отступ слева */
    padding-right:10px;/*внутренний отступ справа */
}

/* стиль при наведение курсора мышки в область нашей кнопки */
.iie-btn:hover {  
     cursor: pointer; /* изменяем иконку курсора мыши */
}

/* стиль выпадающего блока */
.iie-dropdowbox {
      position:absolute; /*позволяет отоброжать блок поверх других элементов страницы*/
      z-index:100; /* у кого больше индекс тот и сверху */
      background: #ffffff; /*фон кнопки*/
      margin-left:30px; /*наружный отступ слева*/
      margin-top:1px; /*наружный отступ сверху*/
      display:none; /*по умолчанию блок считается скрытым*/  
      border:1px solid gray; /*оформляем бордяр*/
      padding:5px;/*определяем отступ от краев блока внутри*/
}

.iie-btn.pressed /* стиль нажатой кнопки */
{
    /* создаем внутреннюю тень*/
    -webkit-box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
    /*конец создаем внутреннюю тень*/
}

.iie-dropdowbox.ddb_show  /* стиль в котором прописываем, что наше окно должно отображаться */
{
    display:block; /* собственно отображаем блок*/
}

JavaScript

//Назначаем функцию 
 $(".btn-dropdownbox").click(function(event){addBtnAddСlickedClass (event,this);});  // назначаем на событие click свою функцю  для каждого элемента документа с классом btn-dropdownbox 

function addBtnAddСlickedClass (event, elOwner) {  
    var idDropdownBox = elOwner.getAttribute("data-iddropdownbox");// получаем id блока который нужно отобразить
    var dropdownBox = document.getElementById(idDropdownBox);// получаем сам элемент  
	
    // если у класса элемента (нашего выпадающего блока) в названии класса имеется ddb_show
	if ($(dropdownBox).hasClass('ddb_show')) {	
	    $(dropdownBox).removeClass('ddb_show'); // удаляем
	}else
	{$(dropdownBox).addClass('ddb_show');} // добавляем
	
	//  если у класса элемента (нашей кнопки) в названии класса имеется pressed
	if ($(elOwner).hasClass('pressed')) {		
	    $(elOwner).removeClass('pressed');  // удаляем
	}
	else
	{$(elOwner).addClass('pressed');} // добавляем
}