jQuery: Stop dropdown menu from collapsing when clicking on its children
<p>I have a top nav bar and some of its items trigger dropdowns/slide-downs.</p>

<p>My problem is that whenever I click an item, or actually any area within the dropdown, the dropdown collapses.</p>

<p>What I need help with is figuring out how to avoid collapsing the dropdown when a child element is clicked (or well, anywhere within the dropdown area since I'd like to account for accidental clicks inside the dropdown but that are not actually clicks on a child element).</p>

<p>Here's the basic <strong>HTML</strong> structure I have:</p>

<pre><code>&lt;ul class="dropdown"&gt;
 &lt;li&gt;&lt;a href="#" class="noclick nojs"&gt;Select your Topic&lt;/a&gt;
  &lt;ul class="nojs" &gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>My JavaScript:</p>

<pre><code>$('.dropdown li').click(function() {
  //Hide all other drop downs that are visible, and remove the class 'selected'
  $(this).siblings('.selected').removeClass('selected').find('ul:visible').slideUp('fast');

  //Show/Hide dropdowns
  $(this).toggleClass('selected');
  $('ul:first', this).stop(true, true).slideToggle('fast');
});
</code></pre>

<p>Here's a <strong><a href="http://jsfiddle.net/rzea/zEQVK/1/" rel="nofollow">DEMO</a></strong></p>

<p>Any help is greatly appreciated.</p>

<p>Thanks.</p>
