title: jQuery Animated List - Cant click nested items
body: <p>I'm trying to create an animated nested list using jQuery Animations but I'm not sure what the best way to go about solving this problem is. </p>
  
  <p>The way I've been doing this is by changing the length of the parent list-item and then making the nested list items visible. </p>
  
  <p>The problem is that the length of the parent list item covers the nested list-items. I want to be able to click on a nested list item (such as Edit Profile, Add Music, Playlists, etc) and have it perform something else. For now, I'm trying to just get alerts to prompt to the screen for testing.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="sidebar-menu" class="col-md-12"&gt;
    &lt;ul&gt;
      &lt;li class="sidebar-menu-item" data-length="2"&gt;&lt;span id="IWantToClickHere"&gt;Profile&lt;/span&gt;
        &lt;ul class="blue-special sublist"&gt;
          &lt;li&gt;Edit Profile&lt;/li&gt;
          &lt;li&gt;Other&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="sidebar-menu-item" data-length="2"&gt;Library [&lt;span class="purple-special"&gt;3537&lt;/span&gt;]
        &lt;ul class="blue-special sublist"&gt;
          &lt;li&gt;Add Music&lt;/li&gt;
          &lt;li&gt;Playlists&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="sidebar-menu-item" data-length="0"&gt;Friends&lt;/li&gt;
      &lt;li class="sidebar-menu-item" data-length="0"&gt;Stations&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li class="sidebar-menu-item" data-length="0"&gt;Settings&lt;/li&gt;
      &lt;li class="sidebar-menu-item" data-length="0"&gt;Logout&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
    $('.sidebar-menu-item').click(function() {
      //When: Menu is opened, 
      if ($(this).hasClass('opened-menu-item')) {
        $(this).removeClass('opened-menu-item');
        //Reset Menu-Item to default height of 20px per menu-item
        $(this).animate({
            height: "20px"
          },
          1000,
  
          //Hide nested content
          function() {
            $(this).find('.sublist').css('display', 'none');
          });
      } else {
        //When: Menu is closed
        $(this).addClass('opened-menu-item');
        $(this).find('.sublist').css('display', 'inherit');
        //Set Menu-Item length to be the number of nested li * 35
        var animateHeight = Number($(this).data("length")) * 35;
        if (animateHeight != 0) {
          $(this).animate({
              height: animateHeight + "px"
            },
            1000);
        }
      }
    });
  });
  </code></pre>
  
  <p>I put together a simple jsfiddle here: <a href="http://jsfiddle.net/W4Km8/8065/" rel="nofollow">http://jsfiddle.net/W4Km8/8065/</a></p>