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

у меня есть это меню

                  <nav class = "navMenu2">
                  <a data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasTop" aria-controls = "offcanvasTop" href = "#">Serviços</a>
                  <a href = "<?php echo $precos ?>">Preços</a>
                  <a href = "<?php echo $clientes ?>">Clientes</a>
                  <a class = "contacto" href = "<?php echo $contactos ?>">Contactos</a>
                  <div class = "escondido">
                  <a href = "#">Sobre Nós</a>  
                  <a href = "#">Recrutamento</a>  
                  </div>
                  <a class = "pedir-demo" href = "<?php echo $pedirdemo ?>">Pedir Demo</a>
                  <div class = "dot"></div>
                  </nav>

И я пытаюсь создать подменю в div "escondido", но оно не остается открытым при наведении курсора.

мой JS:

$('.contacto, .escondido').mouseenter(function(){
  if ( $(".escondido").is(':hidden') ) {
    $(".escondido").slideDown(200);
  } else {
    $(".escondido").slideUp(200);
  }
});

и рабочий пример: https://jsfiddle.net/r7Lm2dg3/

javascript jquery css menu hover

29.03.2022 18:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Здесь я позволю вам мой подход. Прежде всего, я должен задать вопрос: почему вы используете jquery вместо чистого CSS? Потому что вы можете добиться эффекта наведения для своего выпадающего меню.

Затем, если вы просто перенастроите структуру DOM следующим образом, мышь покинет раскрывающийся список <div> только тогда, когда покинете весь класс .has-dropdown.

$('.has-submenu').mouseenter(function(){
  if ( $(".escondido").is(':hidden') ) {
    $(".escondido").slideDown(200);
  } else {
    $(".escondido").slideUp(200);
  }
});

nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: initial;
  
  ul {
    list-style: none;
    
    li {
      list-style: none;
    }
  }
}

.contactos{
    font-size: x-large;
    
    a{
        text-decoration: none;
        color: black;
    }
}

.has-submenu {
  position: relative;
}

.escondido {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 10px;
    transform: translateY(100%);
    z-index: 1;
    
    ul {
      background: red;
      padding: 15px;
      margin: 0;
      white-space: nowrap;
    }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class = "navMenu2">
  <li><a data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasTop" aria-controls = "offcanvasTop" href = "#">Serviços</a></li>
  <li><a href = "<?php echo $precos ?>">Preços</a></li>
  <li><a href = "<?php echo $clientes ?>">Clientes</a></li>
  <li class = "has-submenu">
      <a class = "contacto" href = "<?php echo $contactos ?>">Contactos</a>
      <div class = "escondido">
        <ul>
          <li><a href = "#">Sobre Nós</a>  </li>
          <li><a href = "#">Recrutamento</a>  </li>
        </ul>
      </div>
  </li>
  <li><a class = "pedir-demo" href = "<?php echo $pedirdemo ?>">Pedir Demo</a></li>
</nav>

Обратите внимание, что пример не компилирует файлы SCSS, но он работает, если вы используете его в своем проекте, компилируя файлы SCSS.

— 29.03.2022 18:31

29.03.2022 18:31

Вот мое решение. Я изменил объект и добавил событие mouseleave. Я надеюсь, что это соответствует вашим потребностям.

$('.contacto').mouseenter(() =>{
  if ( $(".escondido").is(':hidden') ) {
    $(".escondido").slideDown(200);
  }
});
$('.escondido').mouseleave(() =>{
  if ( $(".escondido").is(':visible') ) {
    $(".escondido").slideUp(200);
  }
});

29.03.2022 19:15

Другие вопросы по теме

Удалять "?" из всего анкорного текста

Как преобразовать этот jquery в javascript?

Не может отображать значения массива (jquery)

Перебрать все объекты класса в javascript

URL-адрес ajax, показывающий 404, не найден на сервере, но работает на локальном кодировщике?

Коробка закрывается при нажатии кнопки

Наведите указатель мыши на метку переключателя и отобразите изображение

Почему это, если условие не работает, выберите параметры

Отправьте дополнительные параметры с помощью 'bind (this), не теряя при этом объект 'event'

Array Push добавляет данные только один раз

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

Ответы 2

Другие вопросы по теме

Похожие вопросы