@barsecky

Как переписать скрипт jquery?

Добрый день.
Есть скрипт для меню на сайте.
Суть такова что при наведении на пукт меню открывается подменю и при этом пункт подсвечивается пока не уведешь с него или с подпункта курсор.
Все бы хорошо, но когда таких пунктов 10 получается полотенце из скриптов((
как все это можно уменьшить или переписать циклом?
спасибо
P.S. В js досих пор не силен(((

$("#submenu__list-1").hover(function(){    
    $('.pod_submenu').removeClass('menu__hidden-none');
    $('.submenu_link-1').addClass('hover_color');
},function(){
    $('.pod_submenu').addClass('menu__hidden-none');
    $('.submenu_link-1').removeClass('hover_color');
});

$("#submenu__list-2").hover(function(){    
    // $('.pod_submenu').removeClass('menu__hidden-none');
    $('.submenu_link-2').addClass('hover_color');
},function(){
    // $('.pod_submenu').addClass('menu__hidden-none');
    $('.submenu_link-2').removeClass('hover_color');
});

$("#submenu__list-3").hover(function(){    
    // $('.pod_submenu').removeClass('menu__hidden-none');
    $('.submenu_link-3').addClass('hover_color');
},function(){
    // $('.pod_submenu').addClass('menu__hidden-none');
    $('.submenu_link-3').removeClass('hover_color');
});

$("#submenu__list-4").hover(function(){    
    // $('.pod_submenu').removeClass('menu__hidden-none');
    $('.submenu_link-4').addClass('hover_color');
},function(){
    // $('.pod_submenu').addClass('menu__hidden-none');
    $('.submenu_link-4').removeClass('hover_color');
});


<ul  class="submenu">
                <li class="submenu__list" id="submenu__list-1">
                    <a class="submenu__link submenu_link-1" href="#">Разработка</a>
                    <ul class="pod_submenu menu__hidden-none">
                        <li class="pod_submenu-link">Создание сайта</li>
                        <li class="pod_submenu-link">Создание бизнес-сайта</li>
                        <li class="pod_submenu-link">Доработка сайта</li>
                        <li class="pod_submenu-link">Создание мобильной версии</li>
                        <li class="pod_submenu-link">Внедрение CRM</li>
                        <li class="pod_submenu-link">Поддержка сайта</li>
                        <li class="pod_submenu-link">Модернизация сайта</li>
                    </ul>
                </li>
                <li class="submenu__list" id="submenu__list-2">
                    <a class="submenu__link submenu_link-2" href="#">SEO</a>
                </li>
                <li class="submenu__list" id="submenu__list-3">
                    <a class="submenu__link submenu_link-3" href="#">Контекстная реклама</a>
                </li>
                <li class="submenu__list" id="submenu__list-4">
                    <a class="submenu__link submenu_link-4" href="#">Дизайн</a>
                </li>
                <li class="submenu__list" id="submenu__list-5">
                    <a class="submenu__link submenu_link-5" href="#">Интернет-маркетинг</a>
                </li>
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
VlasenkoFedor
@VlasenkoFedor
Программист: php, js, go
$(".submenu__list").hover(function(){    
    $('.pod_submenu').removeClass('menu__hidden-none');
    $('.submenu__link', this).addClass('hover_color');
},function(){
    $('.pod_submenu').addClass('menu__hidden-none');
    $('.submenu__link', this).removeClass('hover_color');
});
Вариант решения
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы