如何在同一个Contao页面上获得jQuery和Mootools？

Question

我正在一个应该从2.11.6升级到3.5.40的Contao网站上工作，因为提供程序很快就会强制将PHP从5.6升级到7.3。升级后的网站的外观应与旧网站相似。

我已经完成了Contao升级，除了主页，它使用两个扩展名，所有页面看起来都不错：

• MenuMatic 0.68.3 for the main navigation (all pages use this)
• FlexSlider 1.4.3 directly underneath the menu (only on the home page)

MenuMatic使用Mootools，FlexSlider使用jQuery。这两个扩展似乎无法一起使用。如果我仅启用Mootools，菜单将起作用（将鼠标悬停在顶部元素之一上会下拉子菜单）；如果我在jQuery中添加FlexSlider内容元素，则滑块可以工作，但菜单下拉菜单不行。我尚未在contao 3.5上找到带有Mootools的带有淡入淡出选项的滑块。

MenuMatic在页面上注入了这些脚本：

<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
    window.addEvent('domready', function() {
    var myMenu = new MenuMatic();
    });
</script>

这是我尝试过的：

• use a pure CSS menu: works on a simple html page, not on the Contao home page – no dropdown
• insert jQuery.noConflict() in the FlexSlider inline script
• wrap flexslider.js with jQuery(document).ready(function( $ ) { ... });

具有noConflict的FlexSlider内联脚本：

<script type="text/javascript">
    /* <![CDATA[ */
    jQuery.noConflict();
    (function($) {
    $(window).load(function() {
        $("#schule").flexslider({
        slideshowSpeed: 6000,
        animationSpeed: 3000,
            animation: "fade",
        direction: "horizontal",
                    controlNav: false,
                    directionNav: false,
            randomize: false,
            pauseOnHover: false,
                pauseOnAction: true,
        useCSS: false,
            touch: true
        });
    });
    })(jQuery);
    /* ]]> */
</script>

您能帮忙吗？

请参阅下面的答案。

Answer 1

例如，用https://gist.github.com/DimitarChristoff/7354353替换MenuMatic脚本。

Answer 2

我在两个地方找到了答案：

1）https://gist.github.com/DimitarChristoff/7354353

更改js / Menumatic_0.68.3.js

来自

var MenuMatic = new Class( {...} );
var MenuMaticSubMenu = new Class( {...} );

到

var MenuMatic;
var MenuMaticSubMenu;
(function ($) {
    MenuMatic = new Class( {...} );
    MenuMaticSubMenu = new Class( {...} );
}(document.id));

2）jQuery/Mootools Conflict - Cant't find solution

更改资产/jquery/core/1.11.3/jquery.min.js

在末尾添加jQuery.noConflict();。

不需要FlexSlider脚本中的noConflict。

菜单和滑块一起使用！