slideToggle on link
<p>The script below works fine if 3 and 3.2 are not links but i cant figure out how to get this to work while they are links.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt; - Test&lt;/title&gt;

  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'&gt;&lt;/script&gt;

&lt;style&gt;
ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}
&lt;/style&gt;





&lt;script type='text/javascript'&gt;

$(document).ready(function() {
    $("#nav ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
    .click(function(e) {
        if (this == e.target) {
            $(this).children('ul').slideToggle('fast');
        }
    });
});


&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;
  &lt;div id="nav"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="javascript:void(0)"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0)"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0)"&gt;3&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="example.com"&gt;3.1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="javascript:void(0)"&gt;3.2&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="example.com"&gt;3.2.1&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0)"&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;


&lt;/body&gt;


&lt;/html&gt;
</code></pre>
