I'm attempting to utilize jQuery to prepend a trigger to a menu and then have that trigger toggle child elements. Unfortunately, the code below is not opening the sub menus when using jQuery prepend. Can anyone provide a suggestion for a fix?
HTML
<ul>
<li class="menu-item-has-children">Item 1</li>
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li class="menu-item-has-children">Sub Item 3</li>
<ul class="sub-menu">
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
<li>Sub Sub Item 3</li>
<li>Sub Sub Item 4</li>
<li>Sub Sub Item 5</li>
</ul>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</ul>
CSS
ul li {
list-style-type:none;
}
.open {
width:20px;
height:20px;
background-color:red;
color:#fff;
display:block;
cursor:pointer;
text-align:center;
}
.sub-menu {
display:none;
}
JS
jQuery(document).ready(function() {
jQuery('.menu-item-has-children').prepend ('<a class="open">+</a>');
jQuery('.open').click(function () {
jQuery(this).next('.sub-menu').toggle();
});
});
Thanks!