javascript - jQuery 动画列表 - 无法单击嵌套元素

Question

我正在尝试使用 jQuery 动画创建动画嵌套列表，但我不确定解决此问题的最佳方法是什么。

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

问题是父列表项的长度覆盖了嵌套列表项。我希望能够单击嵌套列表项(例如编辑配置文件、添加音乐、播放列表等)并让它执行其他操作。目前，我正在尝试获取警报以提示屏幕进行测试。

HTML

<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>

JS

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

我在这里整理了一个简单的 jsfiddle:http://jsfiddle.net/W4Km8/8065/

Answer 1

使用event.stopPropagation()

http://jsfiddle.net/W4Km8/8066/

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

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