Magento 与prototype.js一起使用时,Twitter Bootstrap 3下拉菜单将消失
在magento网站上同时使用bootstrap 3和prototype.js时,我遇到了一个问题 基本上,如果您单击下拉菜单(我们的产品),然后单击背景,下拉菜单(我们的产品)就会消失(prototype.js会在li中添加“display:none;”) 以下是该问题的演示: 您可以看到,下拉菜单的工作原理与应有的一样,页面上的以下链接不包含prototype.js: 以前有没有其他人遇到过这个问题,或者有可能解决冲突 轻松修复: 只需将Magento的prototype.js文件替换为此引导友好的文件: 您可以在此处看到prototype.js文件中为修复引导问题所做的更改: 注意:JQuery必须包含在prototype.js之前的magento皮肤中。。例如:Magento 与prototype.js一起使用时,Twitter Bootstrap 3下拉菜单将消失,magento,twitter-bootstrap,prototypejs,twitter-bootstrap-3,Magento,Twitter Bootstrap,Prototypejs,Twitter Bootstrap 3,在magento网站上同时使用bootstrap 3和prototype.js时,我遇到了一个问题 基本上,如果您单击下拉菜单(我们的产品),然后单击背景,下拉菜单(我们的产品)就会消失(prototype.js会在li中添加“display:none;”) 以下是该问题的演示: 您可以看到,下拉菜单的工作原理与应有的一样,页面上的以下链接不包含prototype.js: 以前有没有其他人遇到过这个问题,或者有可能解决冲突 轻松修复: 只需将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>
请参阅
验证所单击元素的名称空间非常容易
向prototype.js添加验证功能:
然后,在隐藏元素之前验证名称空间:
hide: function(element) {
element = $(element);
if(!isBootstrapEvent)
{
element.style.display = 'none';
}
return element;
},
我还使用了这里的代码:但不需要修改任何源代码。只需将代码放在prototype之后的某个地方,jquery包括:
(函数(){
var isBootstrapEvent=false;
if(window.jQuery){
var all=jQuery('*');
jQuery.each(['hide.bs.dropdown',
'隐藏.bs.崩溃',
“hide.bs.modal”,
'隐藏.bs.工具提示',
“hide.bs.popover”,
'hide.bs.tab'],函数(索引,事件名称){
all.on(事件名称、函数(事件){
isBootstrapEvent=true;
});
});
}
var originalHide=Element.hide;
Element.addMethods({
隐藏:函数(元素){
if(isBootstrapEvent){
isBootstrapEvent=false;
返回元素;
}
返回原始隐藏(元素);
}
});
})();
用MWD建议的引导友好版本替换Magento的prototype.js文件会引发一个错误,阻止保存可配置产品:
Uncaught TypeError: Object [object Array] has no method 'gsub' prototype.js:5826
(运行Magento Magento 1.7.0.2)
米亚希切夫的解决方案效果很好
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip'], 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);
}
});
})();
帮助我摆脱了bootstrap
和prototype
冲突问题
正如@GeekNum88所描述的那样
PrototypeJS向元素原型添加方法,因此当jQuery尝试
要在元素上触发hide()
方法,它实际上是在触发
PrototypeJShide()
方法,相当于jQuery
hide()
方法,并将元素的样式设置为display:none代码>
正如您在问题本身中所建议的,您可以使用bootstrap
友好的prototype
,或者您可以简单地注释bootstrap
中的几行,如下所示
在工具提示.prototype.hide
函数中
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
不建议将*选择器与jQuery一起使用。这将获取页面上的每个DOM对象并将其放入变量中。
我建议选择使用特定于引导组件的元素。以下解决方案仅使用下拉组件:
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('.dropdown');
jQuery.each(['hide.bs.dropdown'], 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);
}
});
})();
我意识到这是一篇相当古老的帖子,但其他人似乎没有提到的答案是“修改jQuery”。您只需要在jQuery的触发器函数中进行一些额外的检查
扩展此if
语句:
// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {
。。。这么说:
// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
// Check for global Element variable (PrototypeJS) and ensure we're not triggering one of its methods.
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) &&
( !window.Element || !jQuery.isFunction( window.Element[ type ] ) ) ) {
“6170
”在jQuery中似乎只提到过一次,这样,如果您使用的是已编译(完整)的jQuery库,您就可以快速检查该字符串。参加聚会的时间晚了,但找到了哪些链接指向哪些链接,哪些链接指向哪些链接的效果非常好。它不会修补每个jQuery选择器,我认为它是迄今为止最好的修复方法。复制此处的代码以帮助未来的人:
jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
var disablePrototypeJS = function (method, pluginsToDisable) {
var handler = function (event) {
event.target[method] = undefined;
setTimeout(function () {
delete event.target[method];
}, 0);
};
pluginsToDisable.each(function (plugin) {
jQuery(window).on(method + '.bs.' + plugin, handler);
});
};
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable);
}
聚会很晚:如果你不想运行额外的脚本,你可以添加一个简单的CSS覆盖来防止它被隐藏
.dropdown {
display: inherit !important;
}
通常使用!重要的
在CSS中被建议不要使用,但我认为这在我看来是可以接受的用法。看看我对类似问题的回答。。我会检查它-谢谢:)花了2天时间,我才发现这篇文章和引导友好的原型版本。非常感谢。知道任何不利方面或兼容性问题吗?我注意到我必须先加载jQuery并停止使用noConflict。是的,最后谢谢!谢谢花了几个小时试图解决这个问题。jQuery必须在原型之前加入,这是一个很好的提示。非常感谢您提供这个解决方案。除了hide()
之外,还有其他可能发生冲突的事件吗?它在all.on….
行中给出了一个错误,TypeError:all.on不是一个函数
@Anthony我还没有找到任何函数,是吗?@evgeny.myasishchev,谢谢,这段代码适合我。但是当我点击菜单时,它并没有重定向到特定的页面。谢谢evgeny,这个解决方案适合我!你让我开心!我不喜欢使用“*”。另一方面,这个问题会影响其他twitter引导功能,比如popover。因此,必须选择多个元素;尽管不是全部,但这是最好的解决方案。很容易理解它在做什么,如果您已经在使用jquery,那么进入您现有的无冲突js文件是有意义的。如果这与原型的预期功能冲突,请使用.nav.dropdown
True Gold完善选择器,先生。非常感谢!修改库总是一个糟糕的建议。如果不修改新版本,您将无法更新jQuery。如果你忘了更新它,事情就会破裂。你的修改可能会破坏比你修复的更多的东西。评级最高的答案是替换PrototypeJS的功能。我看不出修改jQuery有多危险或更糟糕