title: Using JQuery event.target to work with children
body: <p>My question refers specifically to <a href="http://api.jquery.com/event.target/#example-1" rel="noreferrer">http://api.jquery.com/event.target/#example-1</a></p>
  
  <p>If you use a span in the <code>&lt;li&gt;</code> or other tag to change the style such as <code>&lt;b&gt;</code> as I have done <a href="http://jsfiddle.net/hGASR/1/" rel="noreferrer">here</a>, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;b&gt;This doesn't work,&lt;/b&gt; this does
      &lt;ul&gt;
        &lt;li&gt;sub item 1-a&lt;/li&gt;
        &lt;li&gt;sub item 1-b&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;item 2
      &lt;ul&gt;
        &lt;li&gt;sub item 2-a&lt;/li&gt;
        &lt;li&gt;sub item 2-b&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function handler(event) {
    var $target = $(event.target);
    if( $target.is("li") ) {
      $target.children("ul").toggle();
    }
  }
  $("ul").click(handler).find("ul").hide();
  </code></pre>