如何禁用嵌套ul中的所有链接（最低级别的链接除外）？

Question

Let's say I have a list, like this:

<ul>
<li><a href="Sitepages/Introduction.aspx">Introduction</a>
    <ul>
        <li><a href="Sitepages/AboutMe.aspx">About me</a></li>
        <li><a href="Sitepages/AboutTheCompany.aspx">About the company</a>
            <ul>
                <li><a href="Sitepages/History.aspx">History</a></li>
                <li><a href="Sitepages/Locations.aspx">Locations</a>
                    <ul>
                        <li><a href="Sitepages/Belgium.aspx">Belgium</a></li>
                        <li><a href="Sitepages/France.aspx">France</a></li>
                        <li><a href="Sitepages/Germany.aspx">Germany</a></li>
                        <li><a href="Sitepages/Norway.aspx">Norway</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

I have a script that turns this nested ul into an accordion so that only the top levels are shown at first. As soon as someone clicks on a link inside a li containing another ul, it expands that ul and so on.

The thing is, while all this works fine when no links are provided, I want to disable the default behavior of every "a" tag, except for the ones at the lowest level. So the li tags at the lowest level, with a link inside them, should still be active links.

Here's the javascript code that disables the default behavior of the top level links:

    $this.find("li").each(function(){
    if ($(this).find("ul").size() != 0) {
        if ($(this).find("a:first")) {
            $(this).find("a:first").click(function(){ return false; });         
    }
});

While the top level link (Introduction) will ignore the default behavior (redirecting) upon clicking, it will expand and show the "About me" and "About the company" options. But when I click on "About the company", it still redirects.

What should I edit in my code to set the default behavior of every "a" tag to false, except for the last ones (in my example: the country names)?

Thanks for your help!

Answer 1

You can setup two handlers. One to disable all links within an unordered list and another to handle clicks on the last unordered list:

// Disable all links within an ul
$('ul').on("click", "a", function(e){
    e.preventDefault();
});

// second handler to bind to the last ul
$('ul:last').on("click", "a", function(e){
    window.location.href = $(e.target).attr('href');
});

Fiddle: http://jsfiddle.net/puleos/CjB99/