Здравствуйте. Есть меню которое "оживляется" при помощи jQuery. Код оформил следующим образом:
codepen.io/ddimonn8080/pen/aNWdNX?editors=0010
$(document).ready(function(){
/*--------------------------------- функция для меню ---------------------------*/
function setMenu() {
var $openNav = $('.openNav_js'),
$subListHidden = $('.nav__subListHidden_js'),
$itemTitle = $('.nav__itemTitle_js'),
$navList = $('.nav__list_js'),
$navItem = $('.nav__item_js'),
$navSubList = $('.nav__subList_js');
// функция для открытия и закрытия меню в блоке nav при окне больше 750px
function toggleMenu() {
$openNav.on('click', function() {
$subListHidden.slideToggle(500, function() {//открывает и закрывает основное меню
if ($subListHidden.is(':visible')) {//проверяет открыт ли пункт меню
$openNav.html('скрыть меню ↑');//меняет текст внутри кнопки закрытия-открытия
} else {
$openNav.html('показать меню ↓');//меняет текст внутри кнопки закрытия-открытия
}
});
});
}
toggleMenu();
// функция для открытия и закрытия меню в блоке nav при окне больше 750px End
// функция для открытия и закрытия меню в блоке nav при окне меньше 750px
function toggleMenuMini() {
$navList.on('click', function(e) {
var $target = $(e.target),
$targetNext = $target.next('.nav__subList_js'),
hasClass = $target.hasClass('nav__itemTitle_js'),
floatValue = $navItem.css('float');
if ( hasClass && floatValue === 'none') {//если клик по нужному блоку и меню находится в мобильной версии
if ($targetNext.is(':hidden')) {//если пункт меню скрыт
$navSubList.slideUp();//закрывает все пункты
$targetNext.slideDown();//открывает тот по которому кликнули
} else {
$navSubList.slideUp();//иначе,если клик по открытому, то закрывает его
}
}
});
}
toggleMenuMini();
// функция для открытия и закрытия меню в блоке nav при окне меньше 750px End
// открытие и закрытие меню в блоке nav при изменении окна браузера
$(window).resize(function(){
console.log(window.innerWidth);//вывод в консоль ширины окна браузера
if ($navSubList.is(':hidden') && $(window).width() > 718) {
$navSubList.show();
$subListHidden.hide();
} else if ($(window).width() < 718){
$navSubList.hide();
} else if ($(window).width() > 718){
$subListHidden.hide();
$openNav.html('показать меню ↓');
}
});
// открытие и закрытие меню в блоке nav при изменении окна браузера End
}
setMenu();
/*--------------------------------- функция для меню End-----------------------------*/
});
Подскажите пожалуйста правильно ли оформлена/составлена функция? Интересует все ваши мысли по этому поводу. Заранее спасибо.
