БЛОГ НА HUSL


При наведение на ссылку появляется блок со списком ссылок

Автор вопроса: Лев

Подскажите пожалуйста как мне решить задачу. Идея в том что у меня есть 10 ссылок и у каждый ссылке при наведение должно появляться n-ное количество других ссылок в другом блоке. бьюсь не первый час пытаюсь решить данную задачу. Я понимаю что это можно решить с помощью jquery но написать правильно не получать работает криво.

$(document).ready(function() {
  $(".effect__hovers-1").mouseover(function() {
    $(".dropdown__content2").show();
  });
});
$(document).ready(function() {
  $(".effect__hover-2").mouseover(function() {
    $(".dropdown__content3").show();
    $(".dropdown__content2").hide();

  });
  $(".effect__hover-2").mouseout(function() {
    $(".dropdown__content3").show();
    $(".dropdown__content2").hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="columns-1">
  <ul class="bropdowm__items">
    <li>
      <a href="#" class="effect__hovers-1" alt="">О МГИКЕ</a>
    </li>

    <li>
      <a href="#" class="effect__hover-2" alt="">ОБРАЗОВАНИЕ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-3" alt="">НАУКА</a>
    </li>
    <li>
      <a href="#" class="effect__hover-4" alt="">ОПЛАТА</a>
    </li>
    <li>
      <a href="#" class="effect__hover-5" alt="">СТУДЕНТАМ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-6" alt="">ФЕДЕРАЛЬНЫЕ ПРОЕКТЫ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-7" alt="">ИЗДАТЕЛЬСКИЙ ЦЕНТР</a>
    </li>
    <li>
      <a href="#" class="effect__hover-8" alt="">ПРЕСС-СЛУЖБА</a>
    </li>
    <li>
      <a href="#" class="effect__hover-9" alt="">НАУЧНЫЙ ЖУРНАЛ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-10" alt="">КОНТАКТЫ</a>
    </li>
  </ul>

</div>
<div class="columns-2">
  <div class="dropdown__content2" style="display: none;">
    <ul class="bropdowm__items2">
      <li>
        <a href="#" class="effect__hovers-1" alt="">Приветствие ректора</a>
      </li>
      <li>
        <a href="#" class="effect__hover2" alt="">История МГИКа</a>
      </li>
      <li>
        <a href="#" class="effect__hover3" alt="">Структура МГИКа</a>
      </li>
      <li>
        <a href="#" class="effect__hover4" alt="">Учёный своет</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Сведения об образовательной
                                                    организации</a>
      </li>
    </ul>
  </div>
  <div class="dropdown__content3" style="display: none;">
    <ul class="bropdowm__items3">
      <li>
        <a href="#" class="effect__hovers-1" alt="">Факультеты</a>
      </li>
      <li>
        <a href="#" class="effect__hover2" alt="">Кафедры</a>
      </li>
      <li>
        <a href="#" class="effect__hover3" alt="">Магистратура</a>
      </li>
      <li>
        <a href="#" class="effect__hover4" alt="">Аспирантура</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Ассистентура-стажировка</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Центр непрерывного образования и повышения квалификации</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Международный отдел</a>
      </li>
    </ul>
  </div>
  <div class="dropdown__content4" style="display: none;">
    <ul class="bropdowm__items4">
      <li>
        <a href="#" class="effect__hovers-1" alt="">Государственная научная аттестация: присуждение ученых степеней</a>
      </li>
      <li>
        <a href="#" class="effect__hover2" alt="">Журналы</a>
      </li>
      <li>
        <a href="#" class="effect__hover3" alt="">Научно-творческий студенческий альманах "Гамаюн"</a>
      </li>
      <li>
        <a href="#" class="effect__hover4" alt="">Научные мероприятия</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Результаты исследований</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Информационные ресурсы</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Конгресс «Вузы культуры и искусств в международном гуманитарном сотрудничестве»</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Архив конгрессов</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Национальный проект "Наука и университеты"</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Локальные нормативные акты в области науки</a>
      </li>
    </ul>
  </div>

</div>

Идея как бы в этом. Стили там стандартные думаю что они не понадобиться. У меня получается навести и блок показывается и как я навожу на другую ссылку появляется нужный блок но если делать дальше масштабировать то работает криво. Блок начинает появляться под другим блоком. А нужно чтоб при каждом новом наведение на нужную ссылку появлялся ему принадлежащий блок с ссылками

Если вдруг не поймете о чем речь возможно я написал криво. Скидываю ссылку на сайт. Прошу вас перейти в раздел меню и вы увидите о чем идет речь https://gitis.net/


Источник

Ответы (1 шт):

Автор решения: ksa

У меня получается навести и блок показывается и как я навожу на другую ссылку появляется нужный блок но если делать дальше масштабировать то работает криво. Блок начинает появляться под другим блоком. А нужно чтоб при каждом новом наведение на нужную ссылку появлялся ему принадлежащий блок с ссылками

Предложу вот такой вариант решения твоей проблемы...

$(_ => {
  const oa = $('.columns-1 a')
  const od = $('.columns-2 > div')
  $('.columns-1').on('mouseover', 'a', function(){
    const i = oa.index($(this))
    od.removeClass('on')
    od.eq(i).addClass('on')
  })
});
.columns-1 {
  width: 300px;
  border: 1px solid;
}
.columns-2 {
  &> div {
  display: none;
    &.on {
      display: block;
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="columns-1">
  <ul class="bropdowm__items">
    <li>
      <a href="#" class="effect__hovers-1" alt="">О МГИКЕ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-2" alt="">ОБРАЗОВАНИЕ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-3" alt="">НАУКА</a>
    </li>
    <li>
      <a href="#" class="effect__hover-4" alt="">ОПЛАТА</a>
    </li>
    <li>
      <a href="#" class="effect__hover-5" alt="">СТУДЕНТАМ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-6" alt="">ФЕДЕРАЛЬНЫЕ ПРОЕКТЫ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-7" alt="">ИЗДАТЕЛЬСКИЙ ЦЕНТР</a>
    </li>
    <li>
      <a href="#" class="effect__hover-8" alt="">ПРЕСС-СЛУЖБА</a>
    </li>
    <li>
      <a href="#" class="effect__hover-9" alt="">НАУЧНЫЙ ЖУРНАЛ</a>
    </li>
    <li>
      <a href="#" class="effect__hover-10" alt="">КОНТАКТЫ</a>
    </li>
  </ul>

</div>
<div class="columns-2">
  <div class="dropdown__content2">
    <ul class="bropdowm__items2">
      <li>
        <a href="#" class="effect__hovers-1" alt="">Приветствие ректора</a>
      </li>
      <li>
        <a href="#" class="effect__hover2" alt="">История МГИКа</a>
      </li>
      <li>
        <a href="#" class="effect__hover3" alt="">Структура МГИКа</a>
      </li>
      <li>
        <a href="#" class="effect__hover4" alt="">Учёный своет</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Сведения об образовательной организации</a>
      </li>
    </ul>
  </div>
  <div class="dropdown__content3">
    <ul class="bropdowm__items3">
      <li>
        <a href="#" class="effect__hovers-1" alt="">Факультеты</a>
      </li>
      <li>
        <a href="#" class="effect__hover2" alt="">Кафедры</a>
      </li>
      <li>
        <a href="#" class="effect__hover3" alt="">Магистратура</a>
      </li>
      <li>
        <a href="#" class="effect__hover4" alt="">Аспирантура</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Ассистентура-стажировка</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Центр непрерывного образования и повышения квалификации</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Международный отдел</a>
      </li>
    </ul>
  </div>
  <div class="dropdown__content4">
    <ul class="bropdowm__items4">
      <li>
        <a href="#" class="effect__hovers-1" alt="">Государственная научная аттестация: присуждение ученых степеней</a>
      </li>
      <li>
        <a href="#" class="effect__hover2" alt="">Журналы</a>
      </li>
      <li>
        <a href="#" class="effect__hover3" alt="">Научно-творческий студенческий альманах "Гамаюн"</a>
      </li>
      <li>
        <a href="#" class="effect__hover4" alt="">Научные мероприятия</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Результаты исследований</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Информационные ресурсы</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Конгресс «Вузы культуры и искусств в международном гуманитарном сотрудничестве»</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Архив конгрессов</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Национальный проект "Наука и университеты"</a>
      </li>
      <li>
        <a href="#" class="effect__hover5" alt="">Локальные нормативные акты в области науки</a>
      </li>
    </ul>
  </div>

</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.