Question

我正在使用触摸激活菜单（而不是翻转）在Joomla 3.2中构建模板。 Joomla自动加载jQuery但由于某种原因，我为我的菜单编写的脚本将无法使用Joomla中的默认加载脚本，所以如果我将它们删除并在我的下拉脚本上方添加Google include脚本，那么它工作，但没有其他插件可以工作。目前，我已经恢复了默认的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

看到该网站

Answer 1

我的猜测是当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代码而不会出现任何问题。

希望这有帮助。

Answer 2

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

这就是为什么当你手动加载谷歌库时，它的工作原理。它用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

如何让我的所有jquery元素在Joomla中一起工作

2 个答案: