Jquery selector - affecting element inside same DOM element

Question

My CMS generates menus as lists without any id's and classes. For submenus, there are nested lists.

I made jquery script for expanding submenus:

$(function () {
    $(".wrapper ul li").click(function () {
        if ($(this).has("ul").length) {
            $("a", this).removeAttr('href');
            $("ul", this).slideToggle();
        }
    });
});

My problem is that this script reacts to clicking whole li area and I want it to react to clicking link inside li. Of course I just have to add "a" to selector making it ".wrapper ul li a" but what about condition checking if there is ul nested inside li? And slidetoggle selector. How should I change these?

Answer 1

This might work with minimal modification to your original code.

$(function () {
    $(".wrapper ul li a").click(function ()
        {
            this = $(this).parent();
            if ($(this).has("ul").length) {
                $("a", this).removeAttr('href');
                $("ul", this).slideToggle();
            }
        }
    );
});

Test and see if it works. I have not tested it. Cheers