问题 首次单击将ul样式设置为none后，Bootstrap菜单消失

在我的例子中，它是与bootstrap.js和jquery.js一起运行的prototype.js导致了这个问题。

以下是对该问题的讨论： https://github.com/twbs/bootstrap/issues/6921 。它似乎现在是一个“不会修复”的问题，并且如果你不想特别使用jQuery，那么有一个Bootstrap的PrototypeJS分支。

我最好的解决方案是应用CSS display:block !important; 要么 inline-block 取决于你使用元素的元素将覆盖的元素 display:none; 被Prototype应用。

我希望有所帮助

我有更新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')
 })
}

这解决了这个问题

更好的解决方案是在您的页面上添加一小段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脚本，您肯定会失去修改）。

实际上我遇到了Joomla 3的相同问题，它为一些插件加载了Mootools，我在我的模板上添加了这个代码。

希望这可以帮助。

尝试这样做。

在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');
       });    
    };
});

您可能包含了MooTools More模块“Element.Shortcuts”（或者它作为依赖项被拉入）。单击Bootstrap导航选项卡时，它会调用jquery.js库中的element.hide（）调用。由于MooTools已将“隐藏”方法添加到元素中，并且设置了display =“none”，因此标签会消失。

我实现的修复是通过添加“MT”来更改MooTools Element.implement中的方法名称：

    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便捷快捷方式。

这是解决方案

只需转到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;  },

它为我工作..