当与prototype.js一起使用时,Twitter Bootstrap 3下拉菜单消失 [英] Twitter Bootstrap 3 dropdown menu disappears when used with prototype.js
问题描述
使用bootstrap 3&时出现问题一起在magento网站上访问prototype.js.
基本上,如果您单击下拉菜单(我们的产品)&然后单击背景,下拉菜单(我们的产品")消失(prototype.js向"li"添加"display:none;").
以下是该问题的演示: http://ridge.mydevelopmentserver.com/contact.html
您可以看到下拉菜单按其应有的方式工作,而没有在以下链接的页面上包含prototype.js: http://ridge.mydevelopmentserver.com/
是否有其他人在冲突之前遇到过该问题,或者有可能解决该冲突的问题?
轻松修复:
只需使用此引导友好的文件替换Magento的prototype.js文件:
您可以在此处查看prototype.js文件中所做的更改,以解决引导程序问题:
https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554
注意:jQuery必须在您的magento皮肤中包含在prototype.js之前.例如:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>
我还从这里使用了代码: I have an issue when using bootstrap 3 & prototype.js together on a magento website. Basically if you click on the dropdown menu (Our Products) & then click on the background, the dropdown menu (Our Products) disappears (prototype.js adds "display: none;" to the li). Here is a demo of the issue:
http://ridge.mydevelopmentserver.com/contact.html You can see that the dropdown menu works like it should without including prototype.js on the page at the link below:
http://ridge.mydevelopmentserver.com/ Has anyone else ran into this issue before or have a possible solution for the conflict? EASY FIX: Just replace Magento's prototype.js file with this bootstrap friendly one: You can see the changes made in the prototype.js file to fix the bootstrap issue here: https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554 NOTE: JQuery must be include in your magento skin before prototype.js.. Example:
I've also used code from here: http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework but without a need to modify any source. Just put code below somewhere after prototype and jquery includes:
这篇关于当与prototype.js一起使用时,Twitter Bootstrap 3下拉菜单消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip',
'hide.bs.popover',
'hide.bs.tab'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip',
'hide.bs.popover',
'hide.bs.tab'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();