hide (toggle) nested list using jquery
<p>How can I use JQuery to do the following with the below HTML:</p>

<p>I want to hide/toggle <code>1.1, 1.2</code> after clicking <code>1</code> , and likewise
I want to hide/toggle <code>2.1, 2.2</code> after clicking <code>2</code> .</p>

<pre><code>&lt;ul&gt;
&lt;li&gt; 1   &lt;/li&gt;
    &lt;ul&gt;
    &lt;li&gt; 1.1 &lt;/li&gt;
    &lt;li&gt; 1.2 &lt;/li&gt;
    &lt;/ul&gt;
&lt;li&gt; 2 &lt;/li&gt;
    &lt;ul&gt;
    &lt;li&gt; 2.1 &lt;/li&gt;
    &lt;li&gt; 2.2 &lt;/li&gt;
    &lt;/ul&gt;
&lt;/ul&gt;
</code></pre>

<p>I have not had success with the following?</p>

<pre><code>$("li").click(function() {
        $(this).children("ul").hide();
    });
</code></pre>
