Question

I am trying to create my own drop down navigation that expands when an arrow is clicked (for now just a > within a span)

My script cycles through a series of <li>s and checks if any have a child <ul> within them. If a <ul> is detected it then appends <span class='submenuarrow'> ></span> to the parent <li> so the user can click something to expand the menu. This works ok up until the toggle – the submenarrow span appears but does nothing when clicked.

Is this because I am using find to locate the an appended element? Im I doing anything else wrong?

My full script is:

$("#menu ul li").each(function() { 

var sub = $(this).find("ul");

//IF UL IS DETECTED
if (sub.size() > 0) {

//APPENDS ARROW TO LI
$(this).append("<span class='submenuarrow'> ></span>");

//ADDS TOGGLE
$(this).find("span").click(function() {
   $(this).find("ul").toggle("slow");
});//END TOGGLE    

}//END IF

});//END EACH

Answer 1

It’s simple using the :has() selector!

jsBin demo

$('#menu li:has(ul)').each(function() {   
    $(this).append( "<span class='submenuarrow'> &gt; </span>" );  
});

$('#menu').on('click','.submenuarrow',function() {
    $(this).prev("ul").slideToggle("slow");
});

Will work also with:

$('.submenuarrow').on('click',function() {
    $(this).prev("ul").slideToggle("slow");
});