javascript - Foundation，jQuery和Prototype.JS:Dropdown和DropdownMenu无法正常工作

我正在尝试使用jQuery（2.x.x）和prototype.js（1.7.2），并与基础站点6结合使用（尝试6.1.2、6.2.0-rc.1）。从那时起，与Foundation 5合作的结果现在得出了奇怪的结果。第一次与下拉菜单的交互按预期方式工作，但是进一步的交互将无限增加下拉菜单的偏移量。

除了jQuery和prototype.js，我还导入了以下基础组件：


foundation.core.js
foundation.util.keyboard.js
foundation.util.triggers.js
foundation.util.mediaQuery.js
foundation.util.box.js
foundation.dropdown.js


示例：https://jsfiddle.net/4pqzmr7k/1/

这是调用堆栈，显示了通向prototype.js的道路

$ (prototype.js:2048)
show (prototype.js:2168)
_methodized (prototype.js:456)
jQuery.extend.trigger (jquery.js:7825) ==> elem[type]();
(anonymous function) (jquery.js:7875)
jQuery.extend.each (jquery.js:360)
jQuery.fn.jQuery.each (jquery.js:137)
jQuery.fn.extend.trigger (jquery.js:7874)
Dropdown.open (foundation.dropdown.js:333)
(anonymous function) (foundation.dropdown.js:217)

我不确定这是否是基础错误，还是做错了。但是，当Foundation

最佳答案

添加js：

<script>
/* jQuery no conflict */
jQuery.noConflict();

/* Workaround Foundation / Prototype conflicts */
if (Prototype.BrowserFeatures.ElementExtensions) {
    var disablePlugins = ['dropdown', 'tooltip', 'drilldown', 'dropdownmenu'];
    var preventPrototypeJS = function (method, disablePlugins) {
        var handler = function (event) {
            event.target[method] = undefined;
            setTimeout(function () {
                delete event.target[method];
            }, 0);
            console.log(method + ' - ' + disablePlugins);
        };
        disablePlugins.each(function (plugin) {
            jQuery(window).on(method + '.zf.' + plugin, handler);
        });
    };
    preventPrototypeJS('show', disablePlugins);
    preventPrototypeJS('hide', disablePlugins);
}
/* */
jQuery(function ($) {
    /* Foundation sites */
    $(document).foundation();
});
</script>