Javascript jQuery动画列表-无法单击嵌套项

我试图使用jQuery动画创建一个动画嵌套列表，但我不确定解决这个问题的最佳方法是什么

我这样做的方式是更改父列表项的长度，然后使嵌套列表项可见

问题是父列表项的长度覆盖了嵌套的列表项。我希望能够单击嵌套列表项（如编辑配置文件、添加音乐、播放列表等），并让它执行其他操作。现在，我只想得到提示屏幕进行测试的警报

HTML

---

我在这里放了一个简单的jsfiddle:

使用

事件.stopPropagation（）

这可以防止单击事件“冒泡”到父级。如果没有此功能，警报将触发，但父列表也将关闭。

“希望能够单击嵌套列表项（如编辑配置文件、添加音乐、播放列表等）并让其执行其他操作”js的哪个部分没有返回预期结果？这正是我需要做的，直截了当，切中要害。我还在学习，但我会记住的。谢谢

<div id="sidebar-menu" class="col-md-12">
  <ul>
    <li class="sidebar-menu-item" data-length="2"><span id="IWantToClickHere">Profile</span>
      <ul class="blue-special sublist">
        <li>Edit Profile</li>
        <li>Other</li>
      </ul>
    </li>
    <li class="sidebar-menu-item" data-length="2">Library [<span class="purple-special">3537</span>]
      <ul class="blue-special sublist">
        <li>Add Music</li>
        <li>Playlists</li>
      </ul>
    </li>
    <li class="sidebar-menu-item" data-length="0">Friends</li>
    <li class="sidebar-menu-item" data-length="0">Stations</li>
    <li></li>
    <li class="sidebar-menu-item" data-length="0">Settings</li>
    <li class="sidebar-menu-item" data-length="0">Logout</li>
  </ul>
</div>

$(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);
      }
    }
  });
});

$('.blue-special.sublist').click(function(e){
    alert('click');
    e.stopPropagation();
  })