具有嵌套项的父项也会触发子项

Question

我有这个可排序的项目列表，使用 jQuery UI Sortable，它也可以嵌套项目。

这些项目中的每一个都包含可切换的内容，当点击一个项目时它会向下滑动。

但是，在嵌套时单击父项时，不仅会切换父内容，还会切换子内容。

我一直试图在我的 Jquery 脚本中解决这个问题，但一直没能解决。我在 fiddle:

中重现了我的问题

还有HTML:

<ol class="sortable panel-group">
  <li class="panel-default">
    <div class="toggle">Home</div>
    <div class="panel-content">Hidden content</div>
  </li>

  <li class="panel-default">
    <div class="toggle">About us</div>
    <div class="panel-content">Hidden content</div>
  </li>

  <li class="panel-default">
    <div class="toggle">Contact</div>
    <div class="panel-content">Hidden content</div>
  </li>
</ol>

我的 JS：

$(document).ready(function () {

  $('.sortable').nestedSortable({
    handle: 'div',
    items: 'li',
    toleranceElement: '> div'
  });


  $(".panel-default").click(function ( event ) {
    event.stopImmediatePropagation();
    $(".panel-content").not($(this)).slideUp();

    $(this).find(".panel-content").slideDown();
  });

});

Answer 1

您应该只向下滑动找到的第一个“.panel-content”。

  $(".panel-default").click(function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(".panel-content").not($(this)).slideUp();

    $(this).find(".panel-content:first:hidden").slideDown();
  });

Answer 2

注意，.find() returns 当前匹配元素集中每个元素的后代列表。因此，如果单击父项，列表也将包含子项。将匹配元素的集合减少到集合中的第一个应该可以解决问题。

    $(this).find(".panel-content").first().slideDown();

编辑：除此之外，我的建议是使用以下内容来向上滑动先前向下滑动的元素。另请参阅我更新的 fiddle。请注意，您提供给 .not 的选择器不匹配，因为this是“.panel-default”节点而不是“.panel-content”节点。

$(".panel-content").not($(".panel-content:first", this)).slideUp();

jsFiddle

具有嵌套项的父项也会触发子项

Parent with nested item also triggers child item

javascript

jquery-ui