Question

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

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

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

我一直试图在我的Jquery脚本中弄清楚它，但是还没弄清楚。我在这个小提琴中转载了我的问题：

也HTML：

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

});

我的JS：

ggplot(df_long,aes(x=reorder(factor(Incentive), value), y=value, 
                   fill=factor(Goal, levels = c("ret", "new")))) + 
        stat_summary(aes(width=0.7), fun.y="mean", geom="bar", position = "dodge") + 
        coord_flip()

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()返回当前匹配元素集中每个元素的后代列表。因此，如果单击父项，则列表还将包括子项。将匹配元素的集合减少到集合中的第一个应该可以解决问题。

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

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

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

jsFiddle

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

2 个答案: