Меню Bootstrap исчезает после первого щелчка по настройке стиля ul на none

Ответ 1

проблема в том, что когда выпадающий список переключается обратно, style="display: none;" добавляется к <li id="menu-item-286">. Я не думаю, что с вами что-то не так, но учитывая количество других JS, возможно, что есть конфликты.

Я попытался удалить "mootools.js", и проблема исправлена.

Ответ 2

В моем случае это была prototype.js, работающая рядом с bootstrap.js и jquery.js, что вызвало проблему.

Вот обсуждение проблемы: https://github.com/twbs/bootstrap/issues/6921. Похоже, что теперь это проблема "Не исправить" и что есть вилка PrototypeJS Bootstrap, если вы не хотите использовать jQuery специально.

Мое лучшее решение заключалось в применении CSS display:block !important; или inline-block в зависимости от того, для чего вы используете элемент для элемента, который переопределит display:none;, применяемый Prototype.

Я надеюсь, что это поможет

Ответ 3

У меня есть обновление bootstrap.js строка номер 777

function clearMenus() {
$(backdrop).remove()
$(toggle).each(function (e) {
  var $parent = getParent($(this))
  if (!$parent.hasClass('open')) return
  $parent.trigger(e = $.Event('bs.dropdown'))
  if (e.isDefaultPrevented()) return
  $parent.removeClass('open')
 })
}

Это устранило проблему

Ответ 4

Лучшим решением является добавление небольшого фрагмента Javascript на вашу страницу.

if (MooTools != undefined) {
    var mHide = Element.prototype.hide;
    Element.implement({
        hide: function() {
                if (this.hasClass("deeper")) {
                    return this;
                }
                mHide.apply(this, arguments);
            }
    });
}

Вместо "глубже" вы можете поставить "deep.dropdown". Это более чистое решение, потому что: - Вам не нужно удалять Mootools (я думаю, что некоторым функциям нужно работать Mootools) - Вам не нужно изменять код Boostrap (если вы обновите свой Bootstrap script, вы наверняка потеряете свою модификацию).

На самом деле я столкнулся с той же проблемой с Joomla 3, которая загружает Mootools для некоторых плагинов, и я добавил этот код в свой шаблон.

Надеюсь, что это поможет.

Ответ 5

Попробуйте сделать это.

В HTML

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#link1" data-toggle="tab">Link1</a></li>
    <li><a href="#Link2" data-toggle="tab">Link1</a></li>   
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="link1">
        LINK1
    </div>
    <div class="tab-pane fade" id="web_design">
        LINK2
    </div>
</div>

в JavaScript

window.addEvent('domready',function() {    
    Element.prototype.hide = function() {
       $(function () { 
         $('#myTab li:eq(1) a').tab('show');
       });    
    };
});

Ответ 6

Вероятно, вы включили модуль MooTools More "Элемент.Шорки" (или он был втянут как зависимость). Когда вы щелкаете вкладку навигации Bootstrap, она вызывает вызов element.hide() в библиотеке jquery.js. Поскольку метод "hide" был добавлен в элементы MooTools, и он устанавливает display = "none", ваши вкладки исчезают.

Исправление, которое я реализовал, это изменить имена методов в MooTools Element.implement, добавив "MT":

    Element.implement({

    isDisplayedMT : function() {
        return this.getStyle('display') != 'none';
    },

    isVisibleMT : function() {
        var w = this.offsetWidth, h = this.offsetHeight;
        return (w == 0 && h == 0) ? false : (w > 0 && h > 0) ? true : this.style.display != 'none';
    },

    toggleMT : function() {
        return this[this.isDisplayedMT() ? 'hide' : 'show']();
    },

    hideMT : function() {
        var d;
        try {
            // IE fails here if the element is not in the dom
            d = this.getStyle('display');
        } catch (e) {
        }
        if (d == 'none')
            return this;
        return this.store('element:_originalDisplay', d || '').setStyle('display', 'none');
    },

    showMT : function(display) {
        if (!display && this.isDisplayedMT())
            return this;
        display = display || this.retrieve('element:_originalDisplay') || 'block';
        return this.setStyle('display', (display == 'none') ? 'block' : display);
    },

    swapClassMT : function(remove, add) {
        return this.removeClass(remove).addClass(add);
    }

});

Затем я выполнил поиск/замену в MooTools. Больше этих методов и обновил имена.

Теперь я могу использовать вкладку навигации Bootstrap без изменений этого кода и по-прежнему вызывать быстрые клавиши MooTools с новыми именами.

Ответ 7

здесь есть решение

просто перейдите к prototype.js и найдите код

 hide: function(element) {
element = $(element);
element.style.display = 'none';
return element; },

и замените на

hide: function(element) {
element = $(element);
if(!isBootstrapEvent)
{
    element.style.display = 'none';
}
return element;  },

его работа для меня..