0

Используется Bootdtrap 3.3.7 + JQuery 3.1.1

Ситуация: По клику на пункт меню (dropdown), выплывает панель с вкладками (tabs). После клика по кладке или на панели - панель закрывается.

Чтобы не закрывалась сделал:

$('.dropdown-menu, .mega-dropdown-menu').on('click', function(event){
    event.stopPropagation();
});

Теперь при клике по вкладкам или по панели - панель не скрывается, но и вкладки не работыют.

Задача: Как сделать так, чтобы и вкладки работали и панель не закрывалась при клике по элементам панели?

Песочница

1 ответ 1

1

Попробуйте вот эти варианты:

Первый вариант:

$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
    e.stopPropagation()        
    $(this).tab('show');
})

Песочница

Второй вариант:

$('.dropdown-menu').on('click', '.nav-tabs', function() {
    // set a special class on the '.dropdown' element
    $(this).closest('.dropdown').addClass('dontClose');
})

$('.mega-dropdown').on('hide.bs.dropdown', function(e) {
    if ($(this).hasClass('dontClose')) e.preventDefault();
    $(this).removeClass('dontClose');
});

Песочница.

Источник решения с пояснениями. Полагаю, что перевод не потребуется.

1
  • Спасибо, оба варианта работают!!!
    – Drakulitka
    15 мар 2017 в 11:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.