Good afternoon, please tell me how to make it so that when you move from the first level menu item to the second level submenu, the first level menu item remains highlighted?

<div class="header-deep-0"> <a data-toggle="collapse" data-parent="#accordion" href="#0" class="here"> <div class="header-deep-0__icon"> <img src="/upload/iblock/264/01_obshchetekhnicheskie-i-estestvenno-nauchnye-distsipliny.svg"> </div> <span class="left-menu-section-name"> <span style="display: block;"> Общетехнические и естественно научные дисциплины</span> </span> <span class="arrow glyphicon glyphicon-chevron-down"></span> </a> </div> <div id="0" class="panel-collapse collapse in"> <div class="panel-body"> <div class="panel-group" id="0_nested"> <div class="panel"> <div class="header-deep-1"> <a href="/catalog/fizika"> Физика </a> </div><!--/.panel-heading --> <div id="1_1" data-level="2" class="body-deep-1 panel-collapse collapse"> <div class="panel-body"> <div class="header-deep-2"> <a href="/catalog/gotovye_laboratorii_po_fizike_mekhanike_optike" data-level="3" class="link-deep-2"> Лаборатории по физике, механике, оптике </a> </div> <div class="header-deep-2"> <a href="/catalog/fizika_elektrichestvo_i_magnetizm" data-level="3" class="link-deep-2"> Физика-Электричество и магнетизм </a> </div>
  • First, knead your css code as well. Secondly, it would be good to create a model with jsfiddle or codepen with which to work on the answer. - Andrey Fedorov
  • To be honest, it’s a complete orgy, I don’t know if it will help - Roman Stadnichenko
  • codepen.io/anon/pen/JWzQJv - Roman Stadnichenko

2 answers 2

Honestly there is such an orgy that I didn’t bring to mind, but in general I think the principle is clear - Pen

1) Swap the drop-down list and the opening item (.panel-collapse and .header-deep-0)

2) According to the haver, on the submenu, we duplicate the styles of the item haver that opens it

 .panel-collapse:hover + .header-deep-0 > a { background: #2b79c2; color: #eee; }
  • In general, judging by the classes, all the havers are also controlled by js'om (.panel-collapse.collapse.in), but it was not provided, so let's consider that it is not there and we will push it away from the fact that the task needs to be solved on pure css. - MedvedevDev
  • thank you very much =) - Roman Stadnichenko
  • and if I threw you the js code, could you tell me how to do it through it? - Roman Stadnichenko
  • It depends on the code))) Well, most likely yes, why not, in fact, you just need to figure out when and how modifiers are added, if js allows them to be used, then css logic on these modifiers will not be a particular problem - MedvedevDev
  • codepen.io/anon/pen/JWzQJv added js) - Roman Stadnichenko

Solution using jQuery:

  $("Селектор").hover( function() { $(this).closest("селектор уровнем выше").css({'Значение' :'Свойство'}); }, function() { $(this).closest("селектор уровнем выше").css({'Значение' :'Свойство'}); });

In order:

  $("Селектор").hover :

With the help of the selector (they work the same way as in css) we indicate when we hover over which elements we want to change the nearest "parent" of these elements.

Then we have two functions. The first is applied when we point at the elements, the second when we move the cursor away from them.

 $(this).closest("селектор уровнем выше").css({'Значение' :'Свойство'});

Here we specify the element selector above the level, and the function will select the nearest selected element and apply the specified css properties to it.

Same for the second function. In the first, we apply the properties we need when we hover, and in the second, we return them to the state before guidance, or we use standard properties.