Как устроен dropdown в Twitter Bootstrap?

Question

[hjk]

Добрый день!

Я в JS новичок, и меня очень занимает вопрос — как устроен элемент dropdown в Twitter Bootstrap?
Я знаю, как можно отобразить скрытый блок по клику на какой-либо элемент, который и представляет из себя список выбора. Я догадываюсь, как его скрыть. Но проблема в том, что мои решения очень костыльные и меня не покидает ощущение, что я что-то упускаю.

Как сделать такой компонент «правильно»? Если потребуется, я могу предоставить свои попытки решения в какой-нибудь песочнице.

Буду рад подробному ответу, спасибо :)

Answer 1

[yparah]

Через dropdown javascript plugin:

!function($){"use strict";var toggle='[data-toggle="dropdown"]',Dropdown=function(element){var $el=$(element).on('click.dropdown.data-api',this.toggle)
$('html').on('click.dropdown.data-api',function(){$el.parent().removeClass('open')})}
Dropdown.prototype={constructor:Dropdown,toggle:function(e){var $this=$(this),$parent,selector,isActive
if($this.is('.disabled, :disabled'))return
selector=$this.attr('data-target')
if(!selector){selector=$this.attr('href')
selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,'')}
$parent=$(selector)
$parent.length||($parent=$this.parent())
isActive=$parent.hasClass('open')
clearMenus()
if(!isActive)$parent.toggleClass('open')
return false}}
function clearMenus(){$(toggle).parent().removeClass('open')}
$.fn.dropdown=function(option){return this.each(function(){var $this=$(this),data=$this.data('dropdown')
if(!data)$this.data('dropdown',(data=new Dropdown(this)))
if(typeof option=='string')data[option].call($this)})}
$.fn.dropdown.Constructor=Dropdown
$(function(){$('html').on('click.dropdown.data-api',clearMenus)
$('body').on('click.dropdown','.dropdown form',function(e){e.stopPropagation()}).on('click.dropdown.data-api',toggle,Dropdown.prototype.toggle)})}(window.jQuery);

Вызов через javascript: $('.dropdown-toggle').dropdown()

Для быстрого добавления выпадающего списка к элементу просто добавьте атрибут data-toggle="dropdown" и выпадающий список будет автоматически применен в случае корректной разметки.

Comments

[hjk]

Это безусловно круто, знать бы ещё как это работает.

Answer 2

[Вадим Гук]

Сейчас делаю комментарии, и очень интересно позволит ли этот код показывать и закривать форму комментирования при клике на кнопку "Ответить"?