title: hide (toggle) nested list using jquery
body: <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>