Question

I basically want to add arrow if the mousehover my navigation. But two rules should apply:

1. It has to be the TOP parent (I already resolve that in the code)
2. It has to have CHILD elements (UL) submenu, etc. (Which is the problem!)

I can not, no matter what I do get it to only show after conditional if to check if it has children first. Now both links which contaain children, and which not show the arrow.. Please help me.

My code:

$("#menu ul").css({display: "none"}); // Opera Fix
$("#menu li").hover(function(){
    if (($(this).parent().attr("id") == 'menu')) {
    $(this).append('<span class="arrow"></span>');
    }
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle(500);
},function(){
    if ($(this).parent().attr("id") == 'menu') {
    $('.arrow').remove();
    }
    $(this).find('ul:first').css({visibility: "hidden"});
});

Problem: how to add && conditional if to this.parent().attr(“id”) == ‘menu which checks if the LI has children/sub UL

I tried $(this).next().is(‘ul’) no luck! It still append all items with children, and without.

Need your input on this please.

Answer 1

You really shouldn’t need the if() statement. Just make it a requirement in the selector that the li is a child of #menu.

I assume that the #menu element is the top <ul> and your .hide() was to hide the sub-level <ul> elements.

Without seeing your HTML, I’m not sure if this is exactly what you need, but give it a try:

$("#menu > li:has(ul)").hover(function(){
    $(this).append('<span class="arrow"></span>')
           .find('ul:first').css({visibility: "visible",display: "none"}).slideToggle(500);
},function(){
    $(this).children('.arrow').remove()
           .end().find('ul:first').css({visibility: "hidden"});
});

So this will only fire the hover if the <li> is a direct child of #menu, and if it :has() a descendant <ul>.