подсветка элементов меню

426

06 апреля 2017, 19:12

Добрый день, подскажите пожалуйста, как сделать так, чтобы при переходе с пункта меню первого уровня в подменю второго уровня, пункт меню первого уровня оставался бы подсвеченным?

<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>

Answer 1

Честно говоря там такая вакханалия, что до ума доводить не стал, но в целом думаю принцип ясен - Pen

1) Меняем местами выпадающий список и пункт его открывающий (.panel-collapse и .header-deep-0)

2) По хаверу на подменю дублируем стили хавера пункта который его открывает

.panel-collapse:hover + .header-deep-0 > a {
  background: #2b79c2;
  color: #eee;
}

Answer 2

Решение с использованием Jquery:

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

По порядку:

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

С помощью селектора(работают так же,как в css) указываем,при наведении на какие элементы мы хотим изменять ближайшего "родителя" этих элементов.

Затем у нас две функции.Первая применяется когда мы наводим на элементы,вторая - когда убираем от них курсор.

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

Здесь мы указываем селектор элемента выше уровнем,а функция выберет ближайший выбранный нами элемент и применит к нему указанные css свойства.

Тоже самое для второй функции. В первой - мы применяем нужные нам свойства при наведении, а во второй - мы возвращаем их в состояние до наведения ,либо применяем стандартные свойства.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Конфликтует bootstrap и jquery (ajax), что делать?

В общем такая вот ситуация: Есть файл welcomeblade

305

CSS

Как можно улучшить верстку? [требует правки]

Как можно улучшить верстку ( глобально и точечно) ? Бэм и адаптивность не делал

244

CSS

Узор поверх всех изображений на сайте

Появилась необходимость добавить некоторый узор поверх всех изображений на сайтеСделать нужно в браузере, а не на сервере, но так как тег...

225

CSS

IE label исчезает при нажатии tab

Есть поля ввода текста с label слева от них к каждомуТолько в Internet Explorer (9) при нажатии на Tab на клавиатуре с фокусом на следующее поле ввода у него...

278