Twitter Bootstrap:如何使用jQuery以编程方式关闭模式/ popover

前端之家收集整理的这篇文章主要介绍了Twitter Bootstrap:如何使用jQuery以编程方式关闭模式/ popover前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用jquery bootstrap下拉菜单。我在下拉列表中添加了一些输入文本,现在当我尝试提交时,我想要做的,它必须关闭下拉列表。这是任何方式吗?

这里是来自twitter bootstrap的url演示:
http://twitter.github.com/bootstrap/javascript.html#dropdowns

!function ($) {

  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,isActive

  if ($this.is('.disabled,:disabled')) return

  $parent = getParent($this)

  isActive = $parent.hasClass('open')

  clearMenus()

  if (!isActive) {
    $parent.toggleClass('open')
    $this.focus()
  }

  return false
},keydown: function (e) {
  var $this,$items,$active,isActive,index

  if (!/(38|40|27)/.test(e.keyCode)) return

  $this = $(this)

  e.preventDefault()
  e.stopPropagation()

  if ($this.is('.disabled,:disabled')) return

  $parent = getParent($this)

  isActive = $parent.hasClass('open')

  if (!isActive || (isActive && e.keyCode == 27)) return $this.click()

  $items = $('[role=menu] li:not(.divider) a',$parent)

  if (!$items.length) return

  index = $items.index($items.filter(':focus'))

  if (e.keyCode == 38 && index > 0) index--                                        // up
  if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
  if (!~index) index = 0

  $items
    .eq(index)
    .focus()
}



}

  function clearMenus() {
getParent($(toggle))
  .removeClass('open')


}

  function getParent($this) {
var selector = $this.attr('data-target'),$parent

if (!selector) {
  selector = $this.attr('href')
  selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/,'') //strip for ie7
}

$parent = $(selector)
$parent.length || ($parent = $this.parent())

return $parent


 }


  $.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 touchstart.dropdown.data-api',clearMenus)
$('body')
  .on('click.dropdown touchstart.dropdown.data-api','.dropdown form',function (e) { e.stopPropagation() })
  .on('click.dropdown.data-api touchstart.dropdown.data-api',toggle,Dropdown.prototype.toggle)
  .on('keydown.dropdown.data-api touchstart.dropdown.data-api',toggle + ',[role=menu]',Dropdown.prototype.keydown)
  })

}(window.jQuery);

解决方法

自举模式

尝试$(‘#myModal’)。modal(‘hide’)

用于引导popover

我只是看到你正在谈论一个bootstrap dropdown不bootstrap模态:

在这种情况下,你的方法不错,只是删除父元素的打开类。
在来自上面的链接的示例中,第一下拉元素具有“drop3”的id,
所以编程关闭它可以:

$('#drop3').parent().removeClass("open");
原文链接:https://www.f2er.com/bootstrap/234534.html

猜你在找的Bootstrap相关文章