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

Question

[barsecky]

Добрый день.
Есть скрипт для меню на сайте.
Суть такова что при наведении на пукт меню открывается подменю и при этом пункт подсвечивается пока не уведешь с него или с подпункта курсор.
Все бы хорошо, но когда таких пунктов 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>

Comments

[Fedor Vlasenko]

Дополните вопрос примером HTML разметки.
Быстрее помогут

[barsecky]

Fedor Vlasenko, Спасибо, дополнил

[Fedor Vlasenko]

$(".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');
});

попробуйте так

[barsecky]

Fedor Vlasenko, Спасибо, работает.
Как ваш ответ отметить решением?

Answer 1

[Fedor Vlasenko]

$(".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');
});
Вариант решения

Comments

[barsecky]

Только this добавил к .pod_submenu, а то везде подменю первое открывалось.
Еще раз спасибо за помощь!!!