Получение блока div при нажатии на кнопку
Столкнулся с такой проблемой.
Есть 2 кнопки при нажатии которых появляется определенный div с информацией.
Все работает. Но проблема в том чтобы при открытии 2div тут же закрывался первый и наоборот.
Надеюсь правильно обьяснил.
Вот и сам код
label for="pseudoBtn" class="btn" id="price">Подробнее/label> input type="checkbox" id="pseudoBtn"> div class="text">Информация 1/div> label for="pseudoBtn2" class="btn2" id="price2">Подробнее/label> input type="checkbox" id="pseudoBtn2"> div class="text2">Информация 2/div>
.text, input[type="checkbox"] { display: none; } input[type="checkbox"]:checked ~ .text { display: block; } .text2, input[type="checkbox"] { display: none; }
Смена блока при нажатии на кнопку
Всем доброго дня. Возникла вот такая проблема. Прошу помочь с решением. Есть примерно такой HTML.
Изменение стилей блока при нажатии на кнопку
Столкнулся с проблемой вывода статей. Хочу реализовать таким образом: изначально статьи на странице.
Открытие div-блока при нажатии на ссылку
Здравствуйте. Есть некое количество ссылок (в зависимости от выбранных данных). При клике на каждую.
Появление блока div при нажатии на ссылку
Доброго времени суток, помогите доделать функцию. Имеется функция, открывающая блок Div, нужно.
label for="pseudoBtn1" class="btn" id="price">Подробнее/label> input type="checkbox" id="pseudoBtn1"> div class="text1">Информация 1/div> label for="pseudoBtn2" class="btn2" id="price2">Подробнее/label> input type="checkbox" id="pseudoBtn2"> div class="text2">Информация 2/div>
1 2 3 4 5 6 7 8 9 10 11 12 13
/* 360-13 */ .text1, .text2, input[type="checkbox"] { display: none; } #pseudoBtn1:checked ~ .text1 { display: block; } #pseudoBtn2:checked ~ .text2 { display: block; }
label for="pseudoBtn" class="btn" id="price">Подробнее1/label> input type="radio" id="pseudoBtn" name="accordion"> div class="text">Информация 1/div> label for="pseudoBtn2" class="btn2" id="price2">Подробнее2/label> input type="radio" id="pseudoBtn2" name="accordion"> div class="text">Информация 2/div>
.text, input[type="radio"] { display: none; } input[type="radio"]:checked + .text { display: block; }
Все работает. Но только как сделать чтобы при повторном нажатии на кнопку div скрывался.
В данный момент он правильно работает вот только div обратно не скрывается
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
div class="container"> div class="mb1"> input type="radio" name="sco" id="pseudoBtn1" checked> label for="pseudoBtn1" class="btn" id="price1">Подробнее/label> div class="text1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla metus. Nam rutrum volutpat eros, vitae porta urna faucibus ut. Mauris lacinia nisi lectus, aliquam placerat elit aliquam vitae. Donec ultricies nisl in ex vehicula, ac ornare elit consequat. Fusce est metus, sagittis ac ultrices in, porttitor et sapien. Nam quis felis sit amet dolor ultrices interdum. Sed pellentesque velit id eros ornare porttitor. Etiam venenatis ex non orci tempor, ac egestas velit maximus. /div> /div> div class="mb1"> input type="radio" name="sco" id="pseudoBtn2"> label for="pseudoBtn2" class="btn" id="price2">Подробнее/label> div class="text2"> Curabitur semper tincidunt tellus. Integer felis sapien, feugiat vitae nunc et, auctor aliquam tellus. Maecenas volutpat turpis nec arcu finibus, sed elementum ipsum dapibus. Aliquam pharetra finibus lectus, id pharetra justo convallis non. Cras accumsan feugiat ligula placerat venenatis. Ut convallis purus ornare eros interdum malesuada. Vivamus enim sapien, venenatis et finibus vel, venenatis vel mauris. Sed sagittis lorem non mollis dignissim. Aliquam lacus lectus, faucibus in felis ut, tempus malesuada dolor. Proin sed urna non augue sodales mollis. /div> /div> div class="mb1"> input type="radio" name="sco" id="pseudoBtn3"> label for="pseudoBtn3" class="btn" id="price3">Подробнее/label> div class="text3"> Quisque sit amet nunc leo. Vivamus mauris justo, sagittis vel posuere non, dictum vel massa. Quisque rhoncus cursus ex et vestibulum. Suspendisse sit amet laoreet ante, eu fermentum arcu. Mauris augue nisl, ornare sit amet lacinia vel, varius vel purus. Nullam ac massa id nibh gravida fringilla. Nam euismod ultricies velit. Cras commodo vel urna in ullamcorper. Phasellus sagittis quam et orci lacinia, hendrerit pretium tortor pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In tincidunt urna in tristique interdum. Etiam sit amet dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac libero ultricies, sagittis sem eget, dignissim urna. /div> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
* { box-sizing: border-box; } /* 360-16 */ .container{ max-width: 960px; margin: 1rem auto; } .mb1{ margin-bottom: 1rem; } .btn{ display: inline-block; padding: .5rem 1.5rem; border: 1px solid black; border-radius: 5px; cursor: pointer; line-height: 1; vertical-align: middle; } .text1, .text2, .text3, input[name="sco"] { display: none; } #pseudoBtn1:checked ~ .text1 { display: block; } #pseudoBtn2:checked ~ .text2 { display: block; } #pseudoBtn3:checked ~ .text3 { display: block; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
div class="container"> div class="radio-tab"> div class="mb1"> input type="radio" name="radio-tab" id="pseudoBtn1" checked> label for="pseudoBtn1" class="btn" id="price1">Подробнее/label> div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla metus. Nam rutrum volutpat eros, vitae porta urna faucibus ut. Mauris lacinia nisi lectus, aliquam placerat elit aliquam vitae. Donec ultricies nisl in ex vehicula, ac ornare elit consequat. Fusce est metus, sagittis ac ultrices in, porttitor et sapien. Nam quis felis sit amet dolor ultrices interdum. Sed pellentesque velit id eros ornare porttitor. Etiam venenatis ex non orci tempor, ac egestas velit maximus. /div> /div> div class="mb1"> input type="radio" name="radio-tab" id="pseudoBtn2"> label for="pseudoBtn2" class="btn" id="price2">Подробнее/label> div class="text"> Curabitur semper tincidunt tellus. Integer felis sapien, feugiat vitae nunc et, auctor aliquam tellus. Maecenas volutpat turpis nec arcu finibus, sed elementum ipsum dapibus. Aliquam pharetra finibus lectus, id pharetra justo convallis non. Cras accumsan feugiat ligula placerat venenatis. Ut convallis purus ornare eros interdum malesuada. Vivamus enim sapien, venenatis et finibus vel, venenatis vel mauris. Sed sagittis lorem non mollis dignissim. Aliquam lacus lectus, faucibus in felis ut, tempus malesuada dolor. Proin sed urna non augue sodales mollis. /div> /div> div class="mb1"> input type="radio" name="radio-tab" id="pseudoBtn3"> label for="pseudoBtn3" class="btn" id="price3">Подробнее/label> div class="text"> Quisque sit amet nunc leo. Vivamus mauris justo, sagittis vel posuere non, dictum vel massa. Quisque rhoncus cursus ex et vestibulum. Suspendisse sit amet laoreet ante, eu fermentum arcu. Mauris augue nisl, ornare sit amet lacinia vel, varius vel purus. Nullam ac massa id nibh gravida fringilla. Nam euismod ultricies velit. Cras commodo vel urna in ullamcorper. Phasellus sagittis quam et orci lacinia, hendrerit pretium tortor pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In tincidunt urna in tristique interdum. Etiam sit amet dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac libero ultricies, sagittis sem eget, dignissim urna. /div> /div> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
* { box-sizing: border-box; } /* 360-17 */ .container{ max-width: 960px; margin: 1rem auto; } .mb1{ margin-bottom: 1rem; } .btn{ display: inline-block; padding: .5rem 1.5rem; border: 1px solid black; border-radius: 5px; cursor: pointer; line-height: 1; vertical-align: middle; } input[name="radio-tab"]{ display: none; } .radio-tab .text { display: none; } input[name="radio-tab"]:checked ~ .text { display: block; }
Как сделать чтоб при клике на кнопку появлялся div,при клике вне его чтоб закрывался?
Есть кнопка, надо чтоб при клике на нее появлялась выпадашка, которая по умолчанию невидимая, а при клике вне открытой выпадашки чтоб эта выпадашка закрывалась. А при клике по самой выпадашке и ее дочерним элементам чтоб не закрывалась. Это форма, если сохранятся введенные значения — еще лучше.
Подскажите рабочий способ, который у вас точно работает, а то пробую уже разное, работает частично(toggle работает, прозрачность меняется, но то не закрывается при клике вне выпадашки, то становится видимым при клике на сам невидимый элемент, а не на кнопку). Или можно так открыть — закрыть всего один раз. Или то из-за большой вложенности.
Средний 1 комментарий
Обычно, если вы хотите добавить какую-то вещь, вам нужно полностью понимать её логику работы, чтобы это описать в коде. То есть, если вы можете описать весь функционал с помощью алгоритма, есть смысл самостоятельно это писать. В противном случае, лучше воспользоваться готовым решением, вроде Dropdowns или Modals из Bootstrap, потому что это поможет сэкономить время и обеспечит определённую надёжность работы за счёт использования дополнительных ресурсов (нужно подгружать CSS- и JS-файлы бутстрапа).
Самостоятельное понимание обычно приходит с опытом. То есть, например, если я хочу написать модал, я сначала должен понять, что такое этот мой модал и как он себя должен вести в различных ситуациях. По сути, это какой-то элемент, который выводится на переднем плане и блокирует всё остальное. То есть, мне нужно создать один полноэкранный элемент (1), который будет блокировать всё остальное, а потом поместить в него другой элемент (2), который будет отображать нужный мне контент. При клике по элементу 1 мне нужно скрывать оба элемента, освобождая всё, что находится на заднем плане. При этом, если я кликаю внутри элемента 2, ничего не должно происходить. Дальше, мне нужно показывать элементы 1 и 2 после определённого события, например, если я кликаю по кнопке (3).
Вот простейший код который работает как АК-47 (так же доступно на JsFiddle для тестирования):
Open modal Modal content body < width: 100vw; height: 100vh; background-color: green; margin: 0; padding: 0; >#element-3 < border: 1px solid black; background-color: white; >#element-1 < display: none; position: fixed; background-color: blue; width: 100vw; height: 100vh; top: 0; left: 0; >#element-1.show < display: block; >#element-2
var element1 = document.getElementById('element-1'); var element2 = document.getElementById('element-2'); var element3 = document.getElementById('element-3'); element3.onclick = function() < element1.classList.add('show'); >; element1.onclick = function(event) < if (event.target !== event.currentTarget) < return; >element1.classList.remove('show'); >;После того, как вы сделали стабильно работающий функционал, можно начать его развивать. Например, нужно сделать, чтобы элемент 1 был прозрачным. Или нужно сделать, чтобы он и элемент2 появлялись/исчезали, используя анимацию, а не мгновенно. Или нужно избавиться от этих красно-сине-зелёных цветов и отображать у элемента 2 закруглённые уголки и центрировать его по вертикали. Это уже задачи другого уровня, которые решаются другими методами, которые тоже можно разбить на подзадачи и решать их так, чтобы они не ломали задачи более высокого уровня. В таком случае у вас всегда всё будет работать надёжно и предсказуемо.
А ваш код я не видел, так что помочь ничем не могу. Причин, по которым происходят глюки, может быть много, и нужно быть телепатом, чтобы угадать, что именно происходит в вашей реализации кода. Но я видел много примеров, когда люди что-то делали, не понимая полностью логики явления, которое они разрабатывают. (Например, модальный диалог, или галлерею, или кнопку. Или космический корабль.) Из-за этого их код превращается в запутанный клубок, который глючит в самые неожиданные моменты.