Многоуровневое html-меню, управляемое jquery

У меня проблема с многоуровневым меню. Мне нужно, чтобы jQuery отображал или скрывал текущее выбранное подменю и сохранял остальные без изменений. Я еще не очень хорошо разбираюсь в JQuery, поэтому любая помощь будет высоко оценена. Я делюсь здесь с вами тем, что у меня есть. Заранее спасибо!

Я хотел бы упомянуть, что я нашел пример на StackOverflow, который частично работает. После некоторой отладки я понял, что var mobileMenu.css возвращает undefined, и поэтому код иногда работает.

var test1 = $('ul.hdrMenu li');

test1.on( 'click', function(e) 
{   
    var mobileMenuItem  = $(e.target).parent().find( '> ul.sub-menu' );

    if ( **typeof mobileMenuItem.css('display') === "undefined"** )
    {
        mobileMenuItem  = $(e.target).parent().parent().find( '> ul.sub-menu' );          
    }

    if ( mobileMenuItem.css('display') == 'none' ) 
    {
        e.preventDefault();
        mobileMenuItem.slideDown();
        e.stopPropagation();
    } 
    else if ( mobileMenuItem.css('display') == 'block' ) 
    {
        e.preventDefault();
        mobileMenuItem.slideUp();
        e.stopPropagation();
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "hdrMenu">
  <li><a href = "#">Inicio</a></li>
  <li><a href = "#">Servicios</a>
    <ul class = "sub-menu">
      <li><a href = "#">L1</a></li>
      <li><a href = "#">L2</a>
        <ul class = "sub-menu">
          <li><a href = "#">L2-1</a></li>
          <li><a href = "#">L2-2</a></li>
        </ul>
      </li>
      <li><a href = "#">L3</a></li>
      <li><a href = "#">L4</a>
        <ul class = "sub-menu">
          <li><a href = "#">L4-1</a></li>
          <li><a href = "#">L4-4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href = "#">Acerca de</a>
    <ul class = "sub-menu">
      <li><a href = "#">Sub1</a></li>
      <li><a href = "#">Sub2</a></li>
      <li><a href = "#">Sub3</a></li>
      <li><a href = "#">Sub4</a></li>
    </ul>
  </li>
  <li><a href = "#">Contacto</a></li>
</ul>

В вашем примере нет элемента .hdrNav.

— 30.05.2019 11:57

jquery html

30.05.2019 11:48

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

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

Ответы 1

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

Код работает просто отлично, я думаю, вам нужно просто удалить родительский селектор .hdrNav, он должен быть таким:

var test1 = $('ul.hdrMenu li');

Или вы можете оставить селектор как есть и добавить родительский div с классом hdrNav.

var test1 = $('ul.hdrMenu li');
test1.on('click', function(e) {
  var mobileMenu = $(e.target).parent().find('> ul.sub-menu');

  if (mobileMenu.css('display') == 'none') {
    e.preventDefault();
    mobileMenu.slideDown();
    e.stopPropagation();
  } else if (mobileMenu.css('display') == 'block') {
    e.preventDefault();
    mobileMenu.slideUp();
    e.stopPropagation();
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "hdrMenu">
  <li><a href = "#">Inicio</a></li>
  <li><a href = "#">Servicios</a>
    <ul class = "sub-menu">
      <li><a href = "#">L1</a></li>
      <li><a href = "#">L2</a>
        <ul class = "sub-menu">
          <li><a href = "#">L2-1</a></li>
          <li><a href = "#">L2-2</a></li>
        </ul>
      </li>
      <li><a href = "#">L3</a></li>
      <li><a href = "#">L4</a>
        <ul class = "sub-menu">
          <li><a href = "#">L4-1</a></li>
          <li><a href = "#">L4-4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href = "#">Acerca de</a>
    <ul class = "sub-menu">
      <li><a href = "#">Sub1</a></li>
      <li><a href = "#">Sub2</a></li>
      <li><a href = "#">Sub3</a></li>
      <li><a href = "#">Sub4</a></li>
    </ul>
  </li>
  <li><a href = "#">Contacto</a></li>
</ul>

Вы правы, этот код работает нормально... Я ценю время, которое вы потратили на его изучение. В реальном коде, который я отлаживал, есть значок стрелки. поэтому, когда я щелкнул стрелку вместо самой метки, код не смог найти правильного родителя, чтобы скрыть/показать подменю. Это окончательный код jQuery. Еще раз большое спасибо за ваш отзыв.

— 30.05.2019 17:53

30.05.2019 11:56