Не удается заставить работать JavaScript для мобильного меню для темы Drupal 7.x-5.x

Я пытаюсь добавить JavaScript в Drupal для мобильной навигации по теме Zen 7.x-5.x. JavaScript, который я пытаюсь добавить, можно найти на http://codepen.io/micahgodbolt/pen/czwer

Я понимаю, что мне нужно использовать JavaScript, как описано здесь: https://stackoverflow.com/a/14526812

Но, будучи новичком в JavaScript, я не могу заставить его работать. Моя последняя попытка дает «undefined is not a function» в строке 18 в следующем (где объявлена ​​​​переменная AdjustMenu):

(function($) {
    Drupal.behaviors.mybehavior = {
        attach: function () {
        var ww = $(window).width();

        $(document).ready(function() {
            $(".nav li a").each(function() {
                if ($(this).next().length > 0) {
                    $(this).addClass("parent");
                    };
                })

                $(".toggleMenu").click(function(e) {
                    e.preventDefault();
                    $(this).toggleClass("active");
                    $(".nav").toggle();
                });
                adjustMenu();
            })

            $(window).bind('resize orientationchange', function() {
                ww = $(window).width();
                adjustMenu();
            });

            var adjustMenu = function() {
                if (ww < 768) {
                // if "more" link not in DOM, add it
                if (!$(".more")[0]) {
                $('<div class="more">&nbsp;</div>').insertBefore($('.parent')); 
                }
                    $(".toggleMenu").css("display", "inline-block");
                    if (!$(".toggleMenu").hasClass("active")) {
                        $(".nav").hide();
                    } else {
                        $(".nav").show();
                    }
                    $(".nav li").unbind('mouseenter mouseleave');
                    $(".nav li a.parent").unbind('click');
                $(".nav li .more").unbind('click').bind('click', function() {

                        $(this).parent("li").toggleClass("hover");
                    });
                } 
                else if (ww >= 768) {
                // remove .more link in desktop view
                $('.more').remove(); 
                    $(".toggleMenu").css("display", "none");
                    $(".nav").show();
                    $(".nav li").removeClass("hover");
                    $(".nav li a").unbind('click');
                    $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
                        // must be attached to li so that mouseleave is not triggered when hover over submenu
                        $(this).toggleClass('hover');
                });
            }
        }
    }
    };
})(jQuery);

Буду очень признателен за любую помощь, так как в теме Zen 7.x-5.x по умолчанию нет мобильной навигации, а добавить JavaScript, написанный не для Drupal, не очень просто.


javascript drupal zen
person Daniel Westergren    schedule 08.07.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я заставил его работать с помощью нескольких корректировок, включая перемещение объявления переменной rhte AdjustMenu выше, где она вызывается. Весь javascript теперь выглядит так:

(function ($) {
  Drupal.behaviors.mobile_menu_toggle = {
    attach: function (context, settings) {
        var ww = $(window).width();

        var adjustMenu = function() {
                if (ww < 768) {
                // if "more" link not in DOM, add it
                if (!$(".more")[0]) {
                $('<div class="more">&nbsp;</div>').insertBefore($('.parent')); 
                }
                    $(".toggleMenu").css("display", "inline-block");
                    if (!$(".toggleMenu").hasClass("active")) {
                        $(".menu").hide();
                    } else {
                        $(".menu").show();
                    }
                    $(".menu li").unbind('mouseenter mouseleave');
                    $(".menu li a.parent").unbind('click');
                $(".menu li .more").unbind('click').bind('click', function() {

                        $(this).parent("li").toggleClass("hover");
                    });
                } 
                else if (ww >= 768) {
                // remove .more link in desktop view
                $('.more').remove(); 
                    $(".toggleMenu").css("display", "none");
                    $(".menu").show();
                    $(".menu li").removeClass("hover");
                    $(".menu li a").unbind('click');
                    $(".menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
                        // must be attached to li so that mouseleave is not triggered when hover over submenu
                        $(this).toggleClass('hover');
                    });
                }
            }

        $(document).ready(function() {
            $(".menu li a").each(function() {
                if ($(this).next().length > 0) {
                    $(this).addClass("parent");
                    };
                })

                $(".toggleMenu").click(function(e) {
                    e.preventDefault();
                    $(this).toggleClass("active");
                    $(".menu").toggle();
                });
                adjustMenu();
            })

            $(window).bind('resize orientationchange', function() {
                ww = $(window).width();
                adjustMenu();
            });


        }
    };
})(jQuery);
person Daniel Westergren    schedule 08.07.2013