twitter-bootstrap 第一次单击将 ul 样式设置为无后，Bootstrap 菜单消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18182851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap menu disappears after first click setting the ul style to none
提问by Hamidre13
I am trying to make a new wordpress template with bootstrap. The drop down menu does not function correctly. After the second click it gets display:none. I tried to figure it out but I could not! Here is my website address: check out the services that has submenu
我正在尝试使用引导程序制作一个新的 wordpress 模板。下拉菜单无法正常工作。第二次单击后，它会显示：无。我试图弄清楚，但我做不到！这是我的网站地址：查看具有子菜单的服务
Here is my code as well:
这也是我的代码：
<li id="menu-item-286" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-286 dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228">
<a href="http://setheitroadvine.co/business-directories-irvine/" class="dropdown-toggle" data-toggle="dropdown">Business Directories</a>
</li>
<li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231">
<a href="http://setheitroadvine.co/ppc-optimization-irvine/" class="dropdown-toggle" data-toggle="dropdown">PPC optimization</a>
</li>
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232">
<a href="http://setheitroadvine.co/press-release-and-blogs-irvine/" class="dropdown-toggle" data-toggle="dropdown">Press Release and Blogs</a>
</li>
<li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234">
<a href="http://setheitroadvine.co/seo-sem-irvine/" class="dropdown-toggle" data-toggle="dropdown">SEO & SEM Irvine</a>
</li>
<li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238">
<a href="http://setheitroadvine.co/social-media-marketing-irvine/" class="dropdown-toggle" data-toggle="dropdown">Social Media Marketing</a>
</li>
<li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239">
<a href="http://setheitroadvine.co/video-irvine/" class="dropdown-toggle" data-toggle="dropdown">Video Blogging</a>
</li>
</ul>
</li>
回答by rav
the problem is, when the dropdown toggles back, style="display: none;"is appending to <li id="menu-item-286">.
I don't think there's anything wrong with you code, rather given the amount of other JS, it is possible that there are conflicts.
问题是，当下拉菜单切换回来时，style="display: none;"附加到<li id="menu-item-286">. 我不认为你的代码有什么问题，而是考虑到其他JS的数量，可能存在冲突。
I tried removing "mootools.js" and the problem is fixed.
我尝试删除“mootools.js”，问题得到解决。
回答by tribulant
In my case it was prototype.js running alongside bootstrap.js and jquery.js that caused the problem.
在我的例子中，prototype.js 与 bootstrap.js 和 jquery.js 一起运行导致了这个问题。
Here is a discussion of the problem: https://github.com/twbs/bootstrap/issues/6921. It seems like it is now a "Won't Fix" issue and that there is a PrototypeJS fork of Bootstrap if you don't want to use jQuery specifically.
以下是对该问题的讨论：https: //github.com/twbs/bootstrap/issues/6921。现在似乎是一个“无法修复”的问题，如果您不想专门使用 jQuery，则可以使用 Bootstrap 的 PrototypeJS 分支。
My best solution was to apply CSS display:block !important;or inline-blockdepending on what you're using the element for to the element which will override the display:none;being applied by Prototype.
我最好的解决方案是应用 CSSdisplay:block !important;或inline-block取决于您将元素用于什么元素，该元素将覆盖display:none;Prototype 应用的元素。
I hope that helps
我希望有帮助
回答by mohd sikander
i have update bootstrap.js line number 777
我有更新 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')
})
}
This has fixed the problem
这已经解决了问题
回答by titchagcreation
A better solution is to add a small piece of Javascript on your page.
更好的解决方案是在您的页面上添加一小段 Javascript。
if (MooTools != undefined) {
var mHide = Element.prototype.hide;
Element.implement({
hide: function() {
if (this.hasClass("deeper")) {
return this;
}
mHide.apply(this, arguments);
}
});
}
Instead of "deeper" you can put "deeper.dropdown". It is a cleaner solution because : - You don't have to remove Mootools (I guess that some functionalities need Mootools to work) - You don't have to modify the Boostrap code (If you update your Bootstrap script you surely loose your modification).
您可以放置“deeper.dropdown”而不是“deeper”。这是一个更干净的解决方案，因为： - 您不必删除 Mootools（我猜某些功能需要 Mootools 才能工作） - 您不必修改 Boostrap 代码（如果您更新 Bootstrap 脚本，您肯定会丢失修改）。
Actually I encountered the same problem with Joomla 3 which loads Mootools for some plugins and I added this code on my template.
实际上，我在使用 Joomla 3 时遇到了同样的问题，它为某些插件加载了 Mootools，我在模板中添加了此代码。
Hope this helps.
希望这可以帮助。
回答by Shiplu
Try it doing this.
尝试这样做。
In HTML
在 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>
in JavaScript
在 JavaScript 中
window.addEvent('domready',function() {
Element.prototype.hide = function() {
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
};
});
回答by XtopherSD
You probably included the MooTools More module "Element.Shortcuts" (or it was pulled in as a dependency). When you click a Bootstrap navigation tab, it calls an element.hide() call in the jquery.js library. Since the "hide" method has been added to elements by MooTools, and it sets display="none", your tabs disappear.
您可能包含了 MooTools More 模块“Element.Shortcuts”（或者它被作为依赖项引入）。当您单击 Bootstrap 导航选项卡时，它会调用 jquery.js 库中的 element.hide() 调用。由于“隐藏”方法已被 MooTools 添加到元素中，并且它设置了 display="none"，因此您的选项卡消失了。
The fix I implemented was do change the method names in MooTools Element.implement by adding "MT":
我实施的修复是通过添加“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);
}
});
Then I did a search/replace in MooTools More these methods and updated the names.
然后我在 MooTools 中搜索/替换了更多这些方法并更新了名称。
I can now use Bootstrap tab navigation with no changes to that code and still call MooTools convenience shortcuts with the new names.
我现在可以使用 Bootstrap 选项卡导航而无需更改该代码，并且仍然可以使用新名称调用 MooTools 便捷快捷方式。
回答by rakesh37
here is solution
这是解决方案
just go to prototype.js and find code
只需转到prototype.js并找到代码
hide: function(element) {
element = $(element);
element.style.display = 'none';
return element; },
and replace with
并替换为
hide: function(element) {
element = $(element);
if(!isBootstrapEvent)
{
element.style.display = 'none';
}
return element; },
its workging for me..
它对我有用..
