jQuery disables links

Question

Basically I have this HTML table (which acts as a menu):

<table class="content" align="center">
    <tr>
        <td class="links">
            <table class="links">
                <tr>
                    <td>
                        <div id="i1">   
                            <a href="http://www.google.com">Sth 1</a>
                        </div>
                        <div id="i1">   
                            <a>Sth 2</a>
                            <div id="i2">   
                                <a href="http://www.google.com">Sth 2 2</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

and this jQuery script to make it open/close:

$(document).ready(function(){
$("table.links").find("div").toggle(
    function(e){
        $(e.target).closest("div").children("div").slideDown(200);
    }, 
    function(e){
        $(this).children("div").slideUp(200);
    }
);});

For some unknown this jQuery code disables links - you can still open them if you right click on link and choose open in new window, but they don't open if you left click.

Could someone tell me why that is and how to fix it.

Download all files (HTML code, CSS styles, jQuery code and jQuery included): http://www.2shared.com/file/veMG6Gjo/test.html

Answer 1

This is a known side-effect of toggle(). The documentation says:

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.

To work around that, you will have to bind to click instead of toggle.

-- source --> jQuery: link doesn't work after .toggle()

---

So you could do something like :

$(document).ready(function(){
    $("table.links").find("div").each(function(){
        var toggler = false;
        $(this).click(function(e){
            toggler = !toggler;
            if(toggler){
                 $(e.target).closest("div").children("div").slideDown(200);
            }else{
                  $(this).children("div").slideUp(200);
            }
        });
    });
 });

Answer 2

Use the following code, this will only enable the toggle if there are children for the div:

$(document).ready(function(){
    $("table.links").find(".i2").parent().toggle(
        function(e){
            $(e.target).closest("div").children("div").slideDown(200);
        }, 
        function(e){
            $(this).children("div").slideUp(200);
        }
    );
});

Also notice I used .i2 rather than #i2, that's because you should be using classes, not ID's.