Question

使用bootstrap 3＆amp;时遇到问题prototype.js一起在magento网站上。

基本上，如果您点击下拉菜单（我们的产品）＆amp;然后点击背景，下拉菜单（我们的产品）消失（prototype.js将“display：none;”添加到li）。

以下是该问题的演示： http://ridge.mydevelopmentserver.com/contact.html

您可以看到下拉菜单的工作原理应该不会在下面的链接页面上包含prototype.js： http://ridge.mydevelopmentserver.com/

之前是否有其他人遇到此问题或者有可能解决冲突？

EASY FIX：

用这个引导友好的文件替换Magento的prototype.js文件：

https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js

您可以在prototype.js文件中看到修改引导问题的更改：

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

注意：在prototype.js之前，JQuery必须包含在你的magento皮肤中。例如：

<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>

Answer 1

我也使用过这里的代码：http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework但不需要修改任何来源。在原型和jquery包括：

之后，只需将代码放在某处

(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);
        }
    });
})();

Answer 2

派对迟到了，但发现this github issue链接到this informational page，链接到this jsfiddle，效果非常好。它没有修补每个jQuery选择器，我认为，这是目前为止最好的解决方案。在这里复制代码以帮助未来的人民：

Answer 3

不建议在* jQuery中使用*选择器。这将获取页面上的每个DOM对象并将其放入变量中。我建议选择使用Bootstrap组件的元素。以下解决方案仅使用下拉组件：

(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);
        }
    });
})();

Answer 4

派对很晚：如果你不想让额外的脚本运行，你可以添加一个简单的CSS覆盖来防止它被隐藏。

.dropdown {
    display: inherit !important;
}

一般建议在CSS中使用!important，但我认为这在我看来是可接受的用途。

Answer 5

请参阅http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/。

验证点击元素的命名空间非常简单。

向prototype.js添加验证函数：

之后，在隐藏元素之前验证命名空间：

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

Answer 6

使用MWD建议的引导程序友好版本替换Magento的prototype.js文件会导致错误，导致无法保存可配置产品：

Uncaught TypeError: Object [object Array] has no method 'gsub' prototype.js:5826

（运行Magento Magento 1.7.0.2）

evgeny.myasishchev解决方案运作良好。

(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);
        }
    });
})();

Answer 7

This answer帮助我摆脱了bootstrap和prototype冲突问题。

正如@ GeekNum88描述的那样，

PrototypeJS向Element原型添加方法，以便jQuery尝试时在它实际触发的元素上触发hide()方法 PrototypeJS hide()方法，相当于jQuery hide()方法，并将元素的样式设置为display:none;

正如您在问题中建议的那样，您可以使用bootstrap友好prototype，否则您只需在bootstrap中注明几行，如下所示

在Tooltip.prototype.hide函数

中

this.$element.trigger(e)
if (e.isDefaultPrevented()) return

Answer 8

我意识到这是一个非常古老的帖子，但是其他人似乎没有提到的答案就是简单地修改jQuery＆＃34;。你只需要在jQuery的触发函数which can be found around line 332中进行一些额外的检查。

扩展此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 ] ) ) ) {

＆＃34; #6170＆＃34;似乎只在jQuery中提到过一次，所以如果你正在使用编译的（完整的）jQuery库，你可以快速检查一下这个字符串。

当与prototype.js一起使用时，Twitter Bootstrap 3下拉菜单消失

8 个答案: