Как запретить закрытие dropdown меню в Bootstrap, при любом действии, кроме клика по кнопке?

Question

[fruit61]

В Bootstrap есть выпадающие списки dropdown. Мне нужно, что бы открытие и закрытие этого выпадающего списка происходило только кликом по кнопке и не закрывалось при выборе одного из пунктов этого меню или в вне меню, то есть все время отображалось.

Как сейчас сделано у меня.

html:

<li id="Control_menu" class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="Complex_list_menu()">Управление <b class="caret"></b></a>
</li>

js:

window.Complex_list_menu = function () {
	$.getJSON( "/CONTROL/complex_list/", function( j ) {
		$.each( j, function( id, data ) {
			for (var i = 0; i < data.length; i++) {
				items.push( '<li><a href="#" onclick="comple_change(\'' + data[i] + '\')">' + data[i] + '</a></li>' );
			}
		});
		$('#Complex_ul').remove();
		$( "<ul/>", {
			"id": "Complex_ul",
			"class": "dropdown-menu",
			html: items.join( "" )
		}).appendTo( Control_menu );
	});
}

Comments

[Виталий Киренков]

что вам мешает это сделать Без бутстрапа и как вывод избежать ненужных костылей?

[fruit61]

@DeLaVega просто в своем приложении я использую Bootstrap, соответственно я и сделал так. Я не сильно опытен, вот и задал вопрос.

[Виталий Киренков]

@fruit61 Вы не сильно сильны в яваскрипте, вёрстке или бутстрапе?

[fruit61]

Во всем сразу, я занимаюсь Web год.

Answer 1

[Артур Енокян]

Замени скрипт дропдауна на вот этот

+function ($) {
'use strict';

/**
* @DROPDOWN CLASS DEFINITION
*
*/

var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle=dropdown]'
var Dropdown = function (element) {
$(element).on('click.bs.dropdown', this.toggle)
}

Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return

var $parent = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('').insertAfter($(this)).on('click', clearMenus)
}

var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

if (e.isDefaultPrevented()) return

$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)

$this.focus()
}
return false
}

Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27)/.test(e.keyCode)) return

var $this = $(this)

e.preventDefault()
e.stopPropagation()

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

var $parent = getParent($this)
var isActive = $parent.hasClass('open')

if (!isActive || (isActive && e.keyCode == 27)) {
if (e.which == 27) $parent.find(toggle).focus()
return $this.click()
}

var desc = ' li:not(.divider):visible a'
var $items = $parent.find('[role=menu]' + desc + ', [role=listbox]' + desc)

if (!$items.length) return

var 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(e) {
try{

if($(e.target).closest('.dropdown-menu').length && !$(e.target).hasClass('dropdown-closer')){
var c = true;
}else if($(e.target).closest('.dropdown-menu').length && $(e.target).hasClass('dropdown-closer')) {
var c = false
}else {
var c = false
}
if($(e.target).closest('.autoclose').length ) {
var b = true
}
}catch(e){}
$(backdrop).remove()
$(toggle).each(function () {
var $parent = getParent($(this))
var relatedTarget = { relatedTarget: this }
if (!$parent.hasClass('open')) return
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
//console.log($(e.relatedTarget).hasClass('dontDrop'));
if (e.isDefaultPrevented()) return

if(!c || b){
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
}
})

}

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

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

var $parent = selector && $(selector)

return $parent && $parent.length ? $parent : $this.parent()
}

var old = $.fn.dropdown

$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.dropdown')

if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}

$.fn.dropdown.Constructor = Dropdown

$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]', Dropdown.prototype.keydown)

}(jQuery);

теперь у тебя будет открываться и закрываться дропдаун только по кнопке

если надо сделать чтобы он работал как раньше
то добавь класс autoclose на обертку твоего дропдауна как показано ниже

Dropdown

если допустим тебе понадобиться чтобы одно из меню дропдауна закрывало его а остальные нет, то надо сделать так

Dropdown


• 
  ////// добавив на элемент li класс "dropdown-closer" он будет закрывать дропдаун, остальные 4 элемента - нет
  

Answer 2

[betrachter]

$(function () {
        $('.dropdown-toggle').dropdown();
        $('.dropdown ul').click(function (e) {
            e.stopPropagation();
        });
    });

Comments

[Серафим Топал]

Реально работает, просто лучший))) <3

Answer 3

[Александр Решетняк]

используй popover компонент из bootstrap) он как раз открывается и закрывается именно как желаешь^ ^