title: jquery list/anchor click strange behaviour ~
body: <p><strong>JQUERY:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(document).ready(function() {
    $('li.directory &gt; ul').css('display','none');
    $('li.directory').click(function () {
     $(this).toggleClass('expanded');
     $('ul', this).slideToggle('slow');
    });
  
   });
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>HTML:</strong> markup fixed now for demo</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="directory"&gt;&lt;a href="#"&gt;Parent Link&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sibling Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sibling Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sibling Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="directory"&gt;&lt;a href="#"&gt;Parent 2 Link&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sibling Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sibling Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sibling Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This reads to me:
  When the document is ready, hide any UL with a parent LI of class "directory".
  If an LI with class "directory" is clicked, add the "expanded" class (display:block), and slideToggle the child UL in to view.</p>
  
  <p>If the LI.directory is clicked again, hide the child UL again.</p>
  
  <p>This works fine. For some reason, this slide behaviour is applied when I click the sibliing LIs. My JQUERY (I believe) is selecting only LIs with a class of directory? So why should class-less LIs be affected.</p>
  
  <p>I'm creating like an interactive document tree and it works fine except for the child LIs firing the SlideToggle event.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks!</p>