Как при нажатии кнопки получить блок div?
Как сделать так, чтобы при нажатии на «кнопку» на сайте под кнопкой появлялся блок DiV с готовым текстом каким-либо?
У блока, который ты хочешь открывать ставишь display: nonе. При помощи js ставишь обработчик на кнопку, который при нажатии изменяет display: none на display: block. Что-то типа этого:
Вот тоже интересный пример(Jquery)
Как вариант, можно и без js обойтись, это зависит от конкретной задачи и возможностей. Например, с помощью скрытого чекбокса и метки, которая будет выступать псевдокопкой, переключать видимость DIVа:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43305
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать чтоб при клике на кнопку появлялся div,при клике вне его чтоб закрывался?
Есть кнопка, надо чтоб при клике на нее появлялась выпадашка, которая по умолчанию невидимая, а при клике вне открытой выпадашки чтоб эта выпадашка закрывалась. А при клике по самой выпадашке и ее дочерним элементам чтоб не закрывалась. Это форма, если сохранятся введенные значения — еще лучше.
Подскажите рабочий способ, который у вас точно работает, а то пробую уже разное, работает частично(toggle работает, прозрачность меняется, но то не закрывается при клике вне выпадашки, то становится видимым при клике на сам невидимый элемент, а не на кнопку). Или можно так открыть — закрыть всего один раз. Или то из-за большой вложенности.
- Вопрос задан более двух лет назад
- 1972 просмотра
Средний 1 комментарий
- Вконтакте
Обычно, если вы хотите добавить какую-то вещь, вам нужно полностью понимать её логику работы, чтобы это описать в коде. То есть, если вы можете описать весь функционал с помощью алгоритма, есть смысл самостоятельно это писать. В противном случае, лучше воспользоваться готовым решением, вроде Dropdowns или Modals из Bootstrap, потому что это поможет сэкономить время и обеспечит определённую надёжность работы за счёт использования дополнительных ресурсов (нужно подгружать CSS- и JS-файлы бутстрапа).
Самостоятельное понимание обычно приходит с опытом. То есть, например, если я хочу написать модал, я сначала должен понять, что такое этот мой модал и как он себя должен вести в различных ситуациях. По сути, это какой-то элемент, который выводится на переднем плане и блокирует всё остальное. То есть, мне нужно создать один полноэкранный элемент (1), который будет блокировать всё остальное, а потом поместить в него другой элемент (2), который будет отображать нужный мне контент. При клике по элементу 1 мне нужно скрывать оба элемента, освобождая всё, что находится на заднем плане. При этом, если я кликаю внутри элемента 2, ничего не должно происходить. Дальше, мне нужно показывать элементы 1 и 2 после определённого события, например, если я кликаю по кнопке (3).
Вот простейший код который работает как АК-47 (так же доступно на JsFiddle для тестирования):
После того, как вы сделали стабильно работающий функционал, можно начать его развивать. Например, нужно сделать, чтобы элемент 1 был прозрачным. Или нужно сделать, чтобы он и элемент2 появлялись/исчезали, используя анимацию, а не мгновенно. Или нужно избавиться от этих красно-сине-зелёных цветов и отображать у элемента 2 закруглённые уголки и центрировать его по вертикали. Это уже задачи другого уровня, которые решаются другими методами, которые тоже можно разбить на подзадачи и решать их так, чтобы они не ломали задачи более высокого уровня. В таком случае у вас всегда всё будет работать надёжно и предсказуемо.
А ваш код я не видел, так что помочь ничем не могу. Причин, по которым происходят глюки, может быть много, и нужно быть телепатом, чтобы угадать, что именно происходит в вашей реализации кода. Но я видел много примеров, когда люди что-то делали, не понимая полностью логики явления, которое они разрабатывают. (Например, модальный диалог, или галлерею, или кнопку. Или космический корабль.) Из-за этого их код превращается в запутанный клубок, который глючит в самые неожиданные моменты.
Как сделать спойлер или появление блока при нажатии
В этом уроке хочу показать несколько способов, как можно сделать спойлеры. Давайте разберем что это такое, для тех, кто не в курсе.
Спойлер – это блок с информацией, который изначально скрыт от пользователей и появляется лишь тогда, когда пользователь нажмет на определенную кнопку. На моем сайте в виде спойлера сделаны ПРАВИЛА добавления комментариев. Если нажать на слово ПРАВИЛА, которое выделено, то ниже откроется блок с правилами.
Как писал Выше, покажу несколько способов, которые по своей сути похожи, но используют разные скрипты и осуществляют разную анимацию. Ниже представлены примеры.
Давайте по порядку разберем каждый из способов, чтобы Вы могли применить один из них у себя на сайте. Но перед тем как это сделать, давайте определимся с библиотекой jquery. Если вы ранее подключали ее, то приступайте к просмотру способов, если нет, то в шапке или подвале подключите.
Теперь поехали по порядку.
Способ №1
По сути самый простой из способов, при нажатии блок моментально появляется. При повторном нажатии моментально исчезает. Все просто. Данный способ использую и я.
Добавляем очень простенький скрипт. Его можно добавить непосредственно в то место где хотите вывести блок, можете подключить в шапке или подвале, а можете поместить его в файл, который потом подключить к сайту, опять же, где угодно.
Скрипт работает с блоком у которого присвоен класс spoiler-body и показывает его когда будет совершено нажатие на кнопку, блок или ссылку, в общем что угодно, у чего присвоен класс spoiler-title. Для показа блока, скрипт использует метод toggle.
Далее нужно вставить в нужное место, там где вы хотите видеть кнопку и блок, следующую html разметку:
Кнопкой, которая будет открывать станет текст внутри тега b, как и говорил, можете использовать любой тег.
Ну и присвоим минимальные стили. Главный параметр — это display:none у блока, который будет скрытым. Это обязательное условие, иначе не будет работать.
Больше ничего не нужно, все должно работать. Есть еще один момент. Можно сделать эту анимацию немного плавнее. Для этого в скобках после метода toggle добавьте значение в миллисекундах.
Например: toggle(500). Теперь открытие блока будет происходить не моментально, а пол секунды 0,5. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.
Способ №2
Для этого метода и для всех остальных, будут использоваться все те же блоки и классы, поэтому я не буду расписывать все заново. Отличаться будет лишь сам скрипт.
Данный способ плавно открывает блок и он появляется сверху вниз. Для появления, скрипт использует метод slideToggle.
Тут как и в первом варианте можно изменить время анимации. По умолчанию его значение равно 400 миллисекунд. Если желаете ускорить или замедлить, то в скобках добавьте значение.
Например: slideToggle(600).
Способ №3
Этот способ по сути как и второй, стой же анимацией, но в нем есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. В примере вы видели, это просто текст — Показать текст который при открытии блока, меняется на Скрыть текст.
Если добавить фантазию, то можно вместо текста добавить картинку или блок, который украсить стилями. Используется в этом способе, следующая функция.
Изменить время анимации можно по тому же методу, что и во втором способе.
В принципе все, это три основных метода, которые я хотел показать. Какой именно Вам подходит, решать Вам. Теперь Вы сможете без проблем организовать у себя блок, который появляется после нажатия на кнопку.
А Вы используете спойлеры у себя на сайте и для чего?
На этом все, спасибо за внимание. ��
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂
Курсы javascript
Привет всем.
Такой вопрос, как сделать чтобы при нажатии ссылки появляется определенный блок прямо под ссылкой ?
Пример:
<a href="">Показать</a>
после нажатия прямо под ним:
<div /> content
</div>
Пожалуйста помогите разобраться
легче через локальное хранилище.
Я этим пользуюсь
<script>
var show;
function look(type)
<
param=document.getElementById(type);
if(param.style.display == "none")
<
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
>
else param.style.display == "none";
>
</script>
<a onclick="look(‘введи id’); return false;" href="#">Текст</a>
<div style="display:none;padding-top:10px;" из ссылки">Здесь всталяй то, что будет скрываться или раскрываться</div>
Таких ссылок можно делать множество. Только не получается в раскрывающемся блоке сделать раскрывающиеся подблоки по томуже сценарию(((((