Как создать раскрывающееся меню с помощью JQuery

Question

Я нашел скрипку, которая имеет функциональность, которую я хочу. Тем не менее, я не уверен, как настроить код (css), чтобы он мог сбрасывать ссылки меню.

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

То, что я хочу выполнить, - это щелкнуть мышью по каплям пункта 1 и пункта 2. В противном случае они скрыты.

HTML

<!-- original code --> 
<ul id="nav"> 
    <li>Home</li> 
    <li class="parent">About 
     <ul class="sub-nav"> 
      <li>Johnny</li> 
      <li>Julie</li> 
      <li>Jamie</li> 
     </ul> 
    </li> 
    <li>Contact</li> 
</ul> 

<!-- my code --> 
<div class="header-nav"> 
    <nav class="nav-menu"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
    </ul> 
    </nav> 

    <a href="#" id="menu-icon"></a> 
</div> 

JS

$(document).ready(function() { 
    $('.parent').click(function() { 
     $('.sub-nav').toggleClass('visible'); 
    }); 
}); 

// rename the JS to use the id/class for my script 

JSfiddle здесь https://jsfiddle.net/cRsZE/982/

Answer 1

Вы должны обновить событие щелчка в вашем JQuery для работы, нажав на значок меню , Это работает:

$(document).ready(function() { 
    $('#menu-icon').click(function() { 
     $('.nav-menu ul').toggleClass('visible'); 
    }); 
}); 

Редактировать В соответствии с просьбой через комментарии, чтобы иметь меню появится под значком меню все, что вам нужно сделать, это переместить значок меню, чтобы быть выше ul так:

<div class="header-nav"> 
    <a href="#" id="menu-icon"></a> 
    <nav class="nav-menu"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
    </ul> 
    </nav> 
</div> 

И working Fiddle

Answer 2

нужно обновить такой код:

$(document).ready(function() { 
$('#menu-icon').click(function() { 
$('.nav-menu ul').toggleClass('visible'); 
}); 
}); 

Для документации: https://jqueryui.com/menu/

Answer 3

Убрано кода. Как это?

https://jsfiddle.net/cshanno/cRsZE/990/

$(document).ready(function() { 
    $('#menu-icon').click(function() { 
     $('.sub-nav').toggleClass('visible'); 
    }); 
});