Как мне заставить все мои элементы jquery работать вместе в Joomla

Я создаю шаблон в 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.


jquery joomla conflicting-libraries
person Brian    schedule 11.03.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это потому, что jQuery также загружает mootool, он использует $ в качестве инициализации. Поскольку mootool загружается после jQuery, $ === Mootool.

Вот почему, когда вы вручную загружаете библиотеку Google, она работает. Он переопределяет символ $ с помощью 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
person Karl-André Gagnon    schedule 11.03.2014
comment
Спасибо за быстрый ответ! Если я скопирую код так, как вы его написали, он все равно не будет работать, и Dreamweaver скажет, что в последней строке есть синтаксическая ошибка. Я понимаю, что jQuery и Mootools могут конфликтовать, но Joomla не допускает этого с помощью ‹script src=/media/jui/js/jquery-noconflict.js type=text/javascript›‹/script› - person Brian; 11.03.2014
comment
@user3407553 user3407553 на самом деле, я скопировал ваш код, и функция не закрывалась. Обновил код. Что касается noConflict, его можно использовать для конфликта jQuery/Mootool, но в основном он используется, когда загружается несколько экземпляров jQuery. Попробуйте еще раз, посмотрите, получится ли. Я работаю с Joomla в 90% своего проекта, и это самое быстрое решение. - person Karl-André Gagnon; 11.03.2014
comment
Спасибо! Кажется, это работает!!! Какое облегчение. Я попробую другие плагины сейчас, чтобы увидеть, работают ли они. :) - person Brian; 11.03.2014

arrow_upward
3
arrow_downward

Я предполагаю, что причина, по которой ваш код jQuery не работает, когда Joomla управляет загрузкой всех языков JavaScript, заключается в конфликте с 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 без каких-либо проблем.

Надеюсь это поможет.

person Brian Bolli    schedule 11.03.2014