Question

My tree menu is in an unordered list. The links in it however don’t work, I think because the whole ul listens to the jquery script. I want the links to be navigationable, can anybody tell me how to do this?

jquery:

   $("#treeMenu li").toggle(

function() {
    $(this).children('ul').slideDown()
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');
    }
}, function() {
    $(this).children('ul').slideUp()
    if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    }
});

html:

<ul id="treeMenu">
    <li class="folder1"> folder1
        <ul style="display: none">
            <li class="contentContainer"><a href="http://www.google.com">1.1</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.2</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.3</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.4</a></li>

</ul>

jsfiddle

Answer 1

From the documentation on .toggle (event):

Since .toggle() internally uses a click handler to do its work, we must unbind click to remove a behavior attached with .toggle(), so other click handlers can be caught in the crossfire. The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element.

Looks like that’s what’s happening to you. You can add the click functionality back in with a couple of lines of jQuery:

$('a').click(function() {
    location.href = $(this).attr('href');
});​

(This won’t work in the fiddle, but it should work on your site.)

However, I don’t like the way .toggle silently cancels out other click events, and it might surprise you again down the road, so I would replace your .toggle with a proper .click and use .slideToggle instead:

$("#treeMenu li").click(function() {
    $(this).children('ul').slideToggle();
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');
    } else if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    };
});​

You might also use .toggleClass inside the click handler to shorten your code, but I can’t be sure of how you want classes to be added or removed based on your fiddle.

http://jsfiddle.net/Kukd2/6/