Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2019, 22:12
Аспирант
Отправить личное сообщение для javascrip Посмотреть профиль Найти все сообщения от javascrip
 
Регистрация: 29.08.2018
Сообщений: 46

выпадающий блок без display:none
подскажите пожалуйста, можно ли как нибудь сделать выпадающий текстовый блок при нажатии на ссылку без display:none?
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2019, 22:24
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Изменять opacity и transform?
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2019, 22:25
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Попробуем в телепатию: вопрос на самом деле "Какие другие возможности скрыть блок, кроме display: none?"
Ответ: вариантов много, например
position: absolute; top: -9999px; left:-9999px;
или
width: 0; height:0; overflow: hidden;
...
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2019, 23:12
Аспирант
Отправить личное сообщение для javascrip Посмотреть профиль Найти все сообщения от javascrip
 
Регистрация: 29.08.2018
Сообщений: 46

Сообщение от Malleys Посмотреть сообщение
Изменять opacity и transform?
можешь на пример кода кинуть ссылку?

Последний раз редактировалось javascrip, 13.12.2019 в 23:28.
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2019, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от javascrip
может на пример кода кинуть ссылку?
https://javascript.ru/forum/project/...tml#post511222
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2019, 00:02
Аспирант
Отправить личное сообщение для javascrip Посмотреть профиль Найти все сообщения от javascrip
 
Регистрация: 29.08.2018
Сообщений: 46

не, бро, слишком много кода, и надо чтобы закрывалось при клике, есть варики поменьше?
Ответить с цитированием
  #7 (permalink)  
Старый 14.12.2019, 00:22
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от javascrip
не, бро, слишком много кода... есть варики поменьше?
Можно вообще без JS...
<style>
.dropdown > .dropdown__inner {
	position: absolute;
	border-radius: 0.35em;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.25);
	margin: -0.1em;
	padding: 0.5em;
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: 300ms;
	cursor: default;
}
.dropdown > .dropdown__toggler:focus ~ .dropdown__inner,
.dropdown > .dropdown__inner:focus-within {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}
.dropdown > .dropdown__inner::before {
	content: "";
	position: absolute;
	top: -100vh;
	left: 0;
	right: 0;
	bottom: 100%;
}
</style>

<div class="dropdown">
	<button class="dropdown__toggler">≡ Button</button>
	<p class="dropdown__inner">Hi, this is a drop down block</p>
</div>

Последний раз редактировалось Malleys, 14.12.2019 в 00:59. Причина: Улучшенный вариант
Ответить с цитированием
  #8 (permalink)  
Старый 14.12.2019, 16:04
Аспирант
Отправить личное сообщение для javascrip Посмотреть профиль Найти все сообщения от javascrip
 
Регистрация: 29.08.2018
Сообщений: 46

во, классный вариант, ток у меня не меню, а типа faq , как сделать чтобы оставались открытыми вкладки ?
Ответить с цитированием
  #9 (permalink)  
Старый 14.12.2019, 16:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

javascrip,
добавлять класс кнопкам.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мой простой движок магазина без цен или витрины sovsem-nub Ваши сайты и скрипты 12 31.10.2016 17:59
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Jquery Скрыть/Показать блок при наведении tot_kotoryi Ваши сайты и скрипты 1 08.02.2016 23:15
Меню + ниже блок div dima_riabets Элементы интерфейса 0 28.12.2015 02:10
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39