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

Question

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

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

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

我一直试图在我的 Jquery 脚本中弄清楚它，但一直无法弄清楚。我在这个小提琴中重现了我的问题：

https://jsfiddle.net/es3hbdnm/33/

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

});

标签： javascriptjquery-ui

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