Невозможно заставить работать JavaScript для мобильного меню для темы Drupal 7.x-5.x
Я пытаюсь добавить JavaScript в Drupal для мобильной навигации по теме Zen 7.x-5.x. JavaScript, который я пытаюсь добавить, можно найти по http://codepen.io/micahgodbolt/pen/czwer
Я понимаю, что мне нужно использовать JavaScript, как описано здесь: /questions/41922220/ispolzovanie-jquery-s-css-v-drupal-7-zen-theme/41922226#41922226
Но, будучи новичком в JavaScript, я не могу заставить его работать. Моя последняя попытка дает "undefined не является функцией" в строке 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"> </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, не очень легко.
1 ответ
Я получил его с помощью нескольких настроек, в том числе переместив объявление для переменной AdjustMenu выше, где он вызывается. Весь javscript теперь выглядит так:
(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"> </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);