1

我正在 Joomla 3.2 中构建一个带有触摸激活菜单（而不是翻转）的模板。Joomla 会自动加载 jQuery，但由于某种原因，我为菜单编写的脚本无法与 Joomla 中的默认加载脚本一起使用，因此如果我将它们剥离并在我的下拉脚本上方添加 Google 包含脚本，那么它工作，但没有其他插件将工作。目前，我已经恢复了默认的 Joomla 加载脚本，并且我的菜单停止工作。我不知道为什么。（当谈到 jQuery 时，我是一个主要的业余爱好者）。

所以现在，在我的文档的开头，Joomla 像这样加载以下内容：

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/tabs-state.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/system/js/modal.js" type="text/javascript"></script>

在头部部分的最后，我的下拉菜单有以下内容：

<script type="text/javascript">
$(window).load(function(){

        //close drop down by default
        $('.nav-child').hide(); 

        //handle drop down parent click
        $('.parent').click( function(event){
            event.stopPropagation();
            $(this).find('.nav-child').slideToggle();
            $(this).addClass("active");
        });

        //hide drop down when user clicks anywhere outside of drop down
        $(document).click( function(){
            $('.nav-child').hide();
            $("li.active").removeClass("active");
        });

</script>

您可以在http://www.suprememarineandsled.ca上查看该网站

4

2 回答 2

3

我的猜测是当 Joomla 管理所有 JavaScript 语言的加载时，您的 jQuery 代码不起作用的原因是与 Mootools 存在冲突；它也广泛使用 $ 符号。

为了让两者和谐地工作，你可以为 jQuery 分配一个不同的符号：

var $j = jQuery.noConflict();
$j(document).ready(function(){
    // All your code here
});

或者你可以简单地使用 jQuery 而不是 $：

jQuery(document).ready(function() {
    // All your code here
});

或者，将您的 JavaScript 包装在 IIFE（立即调用函数表达式：

function($) {
    $(document).ready(function() {
        // All your code here
    });
})(jQuery);

我更喜欢使用 IIFE，因为它可以防止在其中分配的任何“全局”变量污染全局命名空间，并且因为它仍然允许我使用 $ 符号可以轻松迁移/复制现有代码以使用。

这些方法中的任何一个都应该“修复”任何损坏的 Joomla 核心功能，并允许您运行 jQuery 代码而不会出现任何问题。

希望这可以帮助。

于 2014-03-11T19:11:58.480 回答
1

那是因为 jQuery 也加载了 mootool，它$用作初始化。由于 mootool 是在 jQuery 之后加载的，$ === Mootool.

这就是为什么当您手动加载 google lib 时，它可以工作。$它用 jQuery覆盖符号。

关闭，您的脚本将起作用：

(function($){ // FUnction that accept an argument.
    $(window).load(function(){

        //close drop down by default
        $('.nav-child').hide(); 

        //handle drop down parent click
        $('.parent').click( function(event){
            event.stopPropagation();
            $(this).find('.nav-child').slideToggle();
            $(this).addClass("active");
        });

        //hide drop down when user clicks anywhere outside of drop down
        $(document).click( function(){
            $('.nav-child').hide();
            $("li.active").removeClass("active");
        });
    });
})(jQuery) //Sending jQuery to that function
于 2014-03-11T19:06:29.400 回答