Форум

greenzlat · #1 (**permalink**) 27.11.2020, 08:57

Есть меню. И есть отдельный блок в HTML разметке стоит после самого меню.
Задача такая при наведении на пункт Показать каталог - открывается блок с каталогом. Как только мышку убираем с пункта Показать каталог - сам каталог скрывается.
- этот момент сделал, тут вопросов нет. При наведении навешиваем класс и дальше CSS.
Проблема с другим, когда каталог появляется - при перемещении мышки в область этого каталога - он скрывается. Хотя по скрипту вроде как не должен скрываться.
Нужно чтобы при открытии каталога - можно было мышкой по нему перемещаться и переходить по ссылкам.

<ul class="menu">
  <li class="show_catalog">Показать каталог</li>
  <li>Пункт2</li>
  <li>Пункт3</li>
  <li>Пункт4</li>
  <li>Пункт5</li>
</ul>
<div id="subcatalog">
  тут сам каталог....
</div>

<script type="text/javascript">
  $('.show_catalog').on('mouseover', function() {
  $("#subcatalog").addClass("hovered");
});

$(document).on('mouseover', function(e) {
  if (!$('.show_catalog').is(e.target) && !$('#subcatalog').is(e.target)) { // если наводим не на .show_catalog и не на .menudop
    $("#subcatalog").removeClass("hovered"); // скрываем блок
  }
});

</script>

voraa · #2 (**permalink**) 27.11.2020, 09:19

Когда вы водите мышью по блоку каталога, то попадаете на другие элементы, и они уже являются e.target. Т.е надо делать проверку на то, что блок каталога не является их родительским.

Вообще не понятно, зачем изобретать всякие самопальные интерфейсы. Сейчас уже большинство трафика в интернете идет с мобильных устройств с сенсорными экранами. Как человеку с сенсорным экраном работать с вашим меню? Да и есть полезное требование к интерфейсу, что бы им можно было пользоваться с клавиатуры. И как?

greenzlat · #3 (**permalink**) 30.11.2020, 06:19

Сообщение от voraa

Как человеку с сенсорным экраном работать с вашим меню? Да и есть полезное требование к интерфейсу, что бы им можно было пользоваться с клавиатуры. И как?

Мобильное меню - это отдельная песня, оно реализовано отдельно. Необходимо в силу дизайна сделать то, что я описал выше.

рони · #4 (**permalink**) 30.11.2020, 07:56

greenzlat,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hovered{
      border: 2px solid red;
  }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function(){
let timer;
$('.show_catalog, #subcatalog').on('mouseenter mouseleave', ({type}) => {
    if (type == 'mouseenter') {
        clearTimeout(timer);
        $("#subcatalog").addClass("hovered");
    } else timer = setTimeout(() => $("#subcatalog").removeClass("hovered"), 300)
  });
});
  </script>
</head>

<body>
<ul class="menu">
  <li class="show_catalog">Показать каталог</li>
  <li>Пункт2</li>
  <li>Пункт3</li>
  <li>Пункт4</li>
  <li>Пункт5</li>
</ul>
<div id="subcatalog">
  тут сам каталог....
</div>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript