After conducting a thorough search, I was unable to find exactly what I needed.
I have successfully implemented cookies on my menu so that when the page is reloaded, it remembers which menus were open.
However, I noticed that clicking on a sub-item of Hyperlink 2 will close Hyperlink 2 entirely. Is there a way to keep it open?
This link may provide some insight.
I attempted to use the simulate click method from this source, but it did not work as expected, possibly due to incorrect placement.
While I am still fairly new to JavaScript/jQuery, I am gradually improving my skills!
Thank you
<ul class="nav">
<li><a>Hyperlink 1</a>
</li>
<li class="drop"><a>Hyperlink 2</a>
<ul id="m1">
<li><a href="#">Hyperlink Sub</a>
</li>
<li><a href="#">Hyperlink Sub</a>
</li>
</ul>
</li>
<li class="drop"><a>Hyperlink 3</a>
<ul id="m2">
<li><a href="#">Hyperlink Sub</a>
</li>
<li><a href="#">Hyperlink Sub</a>
</li>
</ul>
</li>
<li class="drop"><a>Hyperlink 4</a>
<ul id="m3">
<li><a href="#">Hyperlink Sub</a>
</li>
<li><a href="#">Hyperlink Sub</a>
</li>
</ul>
</li>
jQuery(function ($) {
// jQuery code in here can safely use $
$('.nav li')
.css({
cursor: "pointer"
});
$(".drop")
.on('click', function () {
$(this).toggleClass('open');
$(this).find('ul').toggle();
$.cookie('open_items', 'the_value');
openItems = new Array();
$("li.drop").each(function (index, item) {
if ($(item).hasClass('open')) {
openItems.push(index);
}
});
$.cookie('open_items', openItems.join(','));
});
if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
previouslyOpenItems = $.cookie('open_items');
openItemIndexes = previouslyOpenItems.split(',');
$(openItemIndexes).each(function (index, item) {
$("li.drop").eq(item).addClass('open').find('ul').toggle();
});
}
});