Checkbox или radiobutton в меню dropdowns

Checkbox или radiobutton в меню dropdowns

Проблема в том что если вставить чекбокс, радиокнопку в меню dropdowns Bootstrap и кликнув по ним, меню сразу закроется.

Пример как это исправить:

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		Dropdown <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">Пункт меню</a></li>
		<li class="dropdown-input"><label><input type="checkbox"> Checkbox</label></li>
		<li class="dropdown-input"><label><input type="radio" name="radio"> Radio 1</label></li>
		<li class="dropdown-input"><label><input type="radio" name="radio"> Radio 2</label></li>
	</ul>
</div>

<script>
$('.dropdown-input').click(function(event){
	event.stopPropagation();
});
</script>
HTML

Дополнительные стили CSS

.dropdown-input label {
	display: block;
	padding: 3px 20px 0 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
}
CSS
15.12.2016, обновлено 17.10.2019
12965
Предыдущая запись Подменю в dropdown Bootstrap

Комментарии

, чтобы добавить комментарий.

Другие публикации

Чекбоксы в виде кнопок
В продолжении статьи о стилизации чекбоксов, несколько примеров как стилизовать чекбоксы в кнопки и группы кнопок.
18536
0
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
68377
+23
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43754
+34
PHP функции для checked и selected
Две мини функции которые облегчают выделения полей select, radio и checkbox до и после отправки форм.
17399
+3
Постраничный вывод массива
В случаях, когда нужно вывести большой PHP-массив постранично, без использования баз данных.
12150
+7
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
65229
+2