Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, I'm facing some challenges getting it to function properly.
Here's the structure of my HTML:
<ul id="menu">
<li>
<a href="#">Item 1</a>
<ul id="submenu">
<li><a href="#" data-menu="show1">Sub menu 1</a></li>
<li><a href="#" data-menu="show2">Sub menu 2</a></li>
</ul>
</li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>
And here's the jQuery code I've implemented:
$(document).ready(function () {
$('#menu li ').click(function () {
$('#submenu').fadeToggle();
$('.content').fadeOut();
});
$('ul#submenu li a').click(function () {
var menu = $(this).data("menu");
$('#' + menu).fadeIn();
});
});
The concept is simple: clicking on the menu hides all content divs and toggles the visibility of the submenu. When a submenu item is clicked, the submenu disappears and the corresponding content div based on the data attribute appears.
However, upon clicking a submenu item, the content briefly displays before disappearing again. Any insights into what might be causing this issue?
Feel free to check out the fiddle for a closer look: https://jsfiddle.net/yab34zdw/