title: javascript onclick navigation (multiple layers) - how do I separate parent and child click?
body: <p><a href="http://jsfiddle.net/kGw8y/1602/" rel="nofollow">http://jsfiddle.net/kGw8y/1602/</a></p>
  
  <pre><code>$('#global-nav li:has(ul)').click(function(){
      $(this).find('&gt; ul').stop().slideToggle(400); 
  });
  </code></pre>
  
  <p>I found this that was originally using hover; however, I modified it to be on click instead.  If you look at the code, the child "sites" has links under it as well, but when you click on "sites" it also activates the main navigation closing it.</p>
  
  <p>How do I separate the "parent" from "child" clicks?  I would prefer this to be a simple code that will work under multiple layers without having to add more and more code.</p>
  
  <p>Also, how would I add an element to this code to where if the top layer "child" has links under it, it adds an arrow (still in black area) and when clicked, the arrow rotates to a down position.  Then when unselected, the arrow points back right.</p>
  
  <p>Thanks for your help.</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>How Do I make this work for a button outside of the navigation where Menu button drops down navigation?</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;a id="menu_button" class="hidecontent_full hidecontent_condensed" href="#"&gt;Menu&lt;/a&gt;
  
  &lt;div class="nav"&gt;
  &lt;ul&gt;
  &lt;li class="first"&gt;&lt;a href="#"&gt;New?&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="welcome.php"&gt;Welcome&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="whoweare.php"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="whatwebelieve.php"&gt;What We Believe&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="whenandwhere.php"&gt;When and Where&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="staff.php"&gt;Crossroads Staff&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Next Steps&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="nextsteps.php"&gt;What is Next Steps?&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="connect.php"&gt;Connect&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="grow.php"&gt;Grow&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="serve.php"&gt;Serve&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Ministries&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="kidz.php"&gt;Childrens Ministry&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="fused.php"&gt;Student Ministry&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="connectgroups.php"&gt;Connect Groups&lt;/a&gt;
      &lt;li&gt;&lt;a href="musicministry.php"&gt;Music Ministry&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="prayerrequests.php"&gt;Prayer Requests&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="sermonarchives.php"&gt;Sermon Archives&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="ccb.php"&gt;Church Community Builder&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="parents.php"&gt;Parents&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Biblereadingplans.php"&gt;Bible Reading Plans&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="recommendedbooks.php"&gt;Recommended Books&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="last"&gt;&lt;a href="#"&gt;Events&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="merge.php"&gt;Merge&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Christmasonthefarm.php"&gt;Christmas on the Farm&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="lovecamedown.php"&gt;Love Came Down&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="dinnerfor8.php"&gt;Dinner for 8&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="calendarofevents.php"&gt;Calendar of Events&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Give&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="howtogive.php"&gt;How to Give&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;  &lt;!-- navigation --&gt;
  </code></pre>