我有一个问题,当使用bootstrap 3& prototype.js在magento网站上。
基本上如果你点击下拉菜单(我们的产品)&然后点击背景,下拉菜单(我们的产品)消失(prototype.js添加“display:none;”到li)。
这里是一个演示的问题:
http://ridge.mydevelopmentserver.com/contact.html
您可以看到下拉菜单的工作原理,如果不包括prototype.js页面上的链接如下:
http://ridge.mydevelopmentserver.com/
有没有人遇到这个问题之前或有可能的解决方案的冲突?
EASY FIX:
只需要替换Magento的prototype.js文件这个bootstrap友好的:
你可以看到在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>
解决方法
我也使用了代码从这里:
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); } }); })();