B
B
barsecky2021-07-02 12:37:25
JavaScript
barsecky, 2021-07-02 12:37:25

How to rewrite jquery script?

Good afternoon.
There is a script for the menu on the site.
The bottom line is that when you hover over a menu item, a submenu opens and the item is highlighted until you move the cursor away from it or from the sub-item.
Everything would be fine, but when there are 10 such points, you get a towel from scripts ((
how can all this be reduced or rewritten in a loop?
thanks
PS I still am not strong in 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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
Fedor Vlasenko, 2021-07-02
@barsecky

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question