Нажатие на многоуровневое раскрывающееся меню не отображает меню

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

$('.main-menu ul li a').click(function(e) {
  if ($(this).next().hasClass('sub-menu')) {
    e.preventDefault();
    $('.sub-menu').slideUp();
    $('.main-menu ul li a').removeClass('active');
    if ($(this).next('.sub-menu').is(':visible')) {
      $(this).removeClass('active');
      $(this).next('.sub-menu').slideUp();
    } else {
      $(this).addClass('active');
      $(this).next('.sub-menu').slideToggle();
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "main-menu">
  <ul id = "menu-main-menu" class = "menu">
    <li class = "menu-item">
      <a href = "http://localhost/barcoun/"><span>Home</span></a>
    </li>
    <li class = "menu-item">
      <a href = "http://localhost/barcoun/about-us/"><span>About Us</span></a>
    </li>
    <li class = "menu-item">
      <a href = "http://localhost/barcoun/contact-us/"><span>Contact Us</span></a>
    </li>
    <li class = "menu-item">
      <a href = "#" class = "menu-image-title-after"><span>Enrolments</span></a>
      <ul class = "sub-menu" style = "display: none">
        <li class = "menu-item">
          <a href = "#"><span>Enrolment</span></a>
          <ul class = "sub-menu" style = "display: none">
            <li class = "menu-item">
              <a href = "http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

На первый взгляд кажется, что вы не предотвращаете распространение события. Это означает, что любой щелчок по внутренним элементам также регистрируется как щелчок по внешним элементам. См. Event.stopPropagation()

— 29.04.2019 12:45

@Utkanos e.stopPropagation() здесь не сработает.

— 29.04.2019 12:50

javascript jquery html

29.04.2019 12:44

Поведение ключевого слова "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

Я не уверен, что это то поведение, которое вы ищете, но если вы удалите первую строку кода, которая вызывает slideUp, похоже, все работает нормально.

$('.main-menu ul li a').click(function(e) {
    if ($(this).next().hasClass('sub-menu')){
        e.preventDefault();
        // Remove this line:
        //$('.sub-menu').slideUp();
        $('.main-menu ul li a').removeClass('active');
        if ($(this).next('.sub-menu').is(':visible')) {
            $(this).removeClass('active');
            $(this).next('.sub-menu').slideUp();
        } else {
            $(this).addClass('active');
            $(this).next('.sub-menu').slideToggle();
        }
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "main-menu">
<ul id = "menu-main-menu" class = "menu">
    <li  class = "menu-item"><a href = "http://localhost/barcoun/"><span>Home</span></a></li>
    <li  class = "menu-item"><a href = "http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
    <li  class = "menu-item"><a href = "http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
    <li  class = "menu-item"><a href = "#" class = "menu-image-title-after"><span>Enrolments</span></a>
        <ul class = "sub-menu">
            <li  class = "menu-item"><a href = "#"><span>Enrolment</span></a>
                <ul class = "sub-menu">
                    <li  class = "menu-item"><a href = "http://localhost/barcoun/enrollment-details-by-bar-association/" ><span>Enrolment Details</span></a></li>
                </ul>
            </li>
        </ul>
    </li>       
</ul>
</div>

29.04.2019 12:52

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

Просто избавьтесь от этой строки: $('.sub-menu').slideUp();

$('.main-menu ul li a').click(function(e) {
  if ($(this).next().hasClass('sub-menu')) {
    e.preventDefault();
    // $('.sub-menu').slideUp(); // <--- This is the culprit
    $('.main-menu ul li a').removeClass('active');
    if ($(this).next('.sub-menu').is(':visible')) {
      $(this).removeClass('active');
      $(this).next('.sub-menu').slideUp();
    } else {
      $(this).addClass('active');
      $(this).next('.sub-menu').slideToggle();
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "main-menu">
  <ul id = "menu-main-menu" class = "menu">
    <li class = "menu-item">
      <a href = "http://localhost/barcoun/"><span>Home</span></a>
    </li>
    <li class = "menu-item">
      <a href = "http://localhost/barcoun/about-us/"><span>About Us</span></a>
    </li>
    <li class = "menu-item">
      <a href = "http://localhost/barcoun/contact-us/"><span>Contact Us</span></a>
    </li>
    <li class = "menu-item">
      <a href = "#" class = "menu-image-title-after"><span>Enrolments</span></a>
      <ul class = "sub-menu" style = "display: none">
        <li class = "menu-item">
          <a href = "#"><span>Enrolment</span></a>
          <ul class = "sub-menu" style = "display: none">
            <li class = "menu-item">
              <a href = "http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details I</span></a>
            </li>
            <li class = "menu-item">
              <a href = "http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details II</span></a>
            </li>
            <li class = "menu-item">
              <a href = "http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details III</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

29.04.2019 12:52

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

Как написать синхронный диалог jQuery для проверки перед отправкой?

Javascript: цикл ожидания для обратного вызова jquery

Изменить данные в модальном окне при его загрузке

Получить индекс объекта, который содержит значение во вложенном массиве - JavaScript

Проблема Fullcalendar.io при анализе свойств событий как функции

Есть ли способ поместить ссылку меню в подменю этой ссылки меню и быть в выбранном цвете, пока вы не нажмете другую опцию?

Как я могу получить данные из базы данных MySQL на основе выбранного идентификатора с помощью начальной загрузки и Ajax?

Не удалось скрыть мой третий дочерний элемент с помощью nth-child

Jquery не работает, когда я запрашиваю отдых (весенняя загрузка)

Как скрыть строку таблицы HTML

Нажатие на многоуровневое раскрывающееся меню не отображает меню

Ответы 2

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

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