Кнопка с селектом [закрыт]

172

20 февраля 2019, 13:20

Всем привет,подскажите как реализовать такую кнопку с селектами[![введите сюда описание изображения][1]][1]

Answer 1

Насколько понял основная мысль в показе скрытого меню по клику на кнопке.

var linkBtn = document.querySelector('.show-menu'); 
 
linkBtn.addEventListener("click", function(event) { 
	event.preventDefault(); 
	var menuList = document.querySelector('.menu--hide'); 
 
	if(menuList) { 
		menuList.classList.toggle("menu--show"); 
	} 
});

.show-menu { 
	text-decoration: none; 
} 
 
.show-menu:hover { 
	text-decoration: underline; 
	cursor: pointer; 
} 
 
.menu { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
.menu--hide { 
  display: none; 
} 
 
.menu--show { 
  display: block; 
}

<a href="" class="show-menu">Показать меню</a> 
 
<ul class="menu  menu--hide"> 
  <li class="menu__item">пункт 1</li> 
  <li class="menu__item">пункт 2</li> 
</ul>

Answer 2

Использовать готовые библиотеки, т.к. в них реализовано много нюансов. Рекомендовал бы этот вариант.
Использовать CSS.
Использовать JS, например. К сожалению, код на данном сайте сейчас не воспроизводится. Для воспроизведения перейдите по указанной ссылке выше.

$(document).ready(function() { 
 
  $("#more").on("click", function() { 
    $("ul").toggle(); 
  }); 
 
});

button { 
  border: 0; 
} 
 
ul { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="more" value="More..." /> 
<ul id="list"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li> 
  <li>Item 5</li> 
</ul>