Javascript 当前列表可折叠且父元素可选

我在让我的列表以我需要的方式交互时遇到了问题。 我需要保留我目前拥有的功能，同时添加另外两个关键部分
我在添加这些部件时失败，但没有丢失当前功能，也没有完全破坏应用程序
我需要能够通过单击父元素来选择/取消选择所有子元素。
我需要列表是可折叠的，当父母在第二个列表中有一个孩子时，我需要父母的名字位于该列表中孩子的上方

如果所有子项都不在右侧列表中，则父项不应出现在右侧列表中，但父项应始终位于左侧

我真正遇到的问题是，为了使其可折叠，我一直尝试使用复选框，并隐藏样式，但这些都不起作用，您将看到原因。代码如下

总之

• 可折叠列表

• 通过单击“父项”，选择/取消选择所有子项

• 如果左侧列表中有一个或多个子项，则父id将显示在该列表中

HTML:

阿拉斯加州

儿童1
儿童2
儿童3



华盛顿

儿童1
儿童2
儿童3



得克萨斯州

儿童1
儿童2
儿童3


包括
排除

CSS:

.half{
显示：块；
浮动：左；
宽度：50%；
}

JavaScript:

$（函数（）{
$（'.include'）。单击（函数（e）{
var$checks=$（“输入：已检查”）；
$。每个（$检查，功能（k，v）{
var tempid=$（this.parent（）.data（'id'）；
var元素=$（this.parent（）.detach（）；
$（'#two'）。追加（元素）；
});
});
$（'.exclude'）。单击（函数（e）{
var$checks=$（“输入：已检查”）；
$。每个（$检查，功能（k，v）{
var tempid=$（this.parent（）.data（'id'）；
var元素=$（this.parent（）.detach（）；
$（'#one'）.find（'#'+tempid+'ul'）.append（元素）；
});        
});
});

---

以下是小提琴解决方案：

我将在这里解释重要的部分

单个列表项的HTML

<li id="alaska">
    <span class="title">Alaska</span><span class="collapse">(V)</span>
    <ul>
      <li data-id="alaska"><input type="checkbox" /> Children 1</li>
      <li data-id="alaska"><input type="checkbox" /> Children 2</li>
      <li data-id="alaska"><input type="checkbox" /> Children 3</li>
    </ul>
</li>

进行了一点重构，以仅捕获一次变量中的父级。在span classed

state name

前面添加一个span，以在包含的子项上方显示状态名称

<li id="alaska">
  <span class="parent">Alaska</span>
  <span class="collapse">collapse</span>
  <ul>
    <li data-id="alaska">
      <input type="checkbox">Children 1</li>
    <li data-id="alaska">
      <input type="checkbox">Children 2</li>
    <li data-id="alaska">
      <input type="checkbox">Children 3</li>
  </ul>
</li>

JS用于折叠和自动选择

$('.collapse').click(function() {
        $(this).siblings('ul').slideToggle();
    });

$('.title').click(function() {
    $(this).siblings('ul').find('input').each(function() {
        $(this).attr('checked', true);
    });
});

单击折叠按钮将打开和关闭同级

ul

单击标题将所有子复选框标记为已选中

我相信这会解决您所面临的所有问题。

更新 这是一个更新的演示

对.exclude方法进行了一些更改

$('.exclude').click(function(e) {
  var $checks = $("input:checked");
  $.each($checks, function(k, v) {
    var tempid = $(this).parent().data('id');
    var element = $(this).parent().detach();
    $('#one').find('#' + tempid + ' ul').append(element);
    var items = $('#two #' + tempid + '-2').children('li');
    if (items.length == 3 || items.length == 0) {
      $('#two #' + tempid + '-2-heading').hide();
    } else {
      $('#two #' + tempid + '-2-heading').show();
    }
  });
});

---

这是一个演示

像这样的事情应该可以

HTML结构如下所示 我把它改了一点，以适应崩溃和检查所有的孩子

<li id="alaska">
  <span class="parent">Alaska</span>
  <span class="collapse">collapse</span>
  <ul>
    <li data-id="alaska">
      <input type="checkbox">Children 1</li>
    <li data-id="alaska">
      <input type="checkbox">Children 2</li>
    <li data-id="alaska">
      <input type="checkbox">Children 3</li>
  </ul>
</li>

除了创建一个新的有序列表

#alaska-2

之外，该脚本还将添加一个span，该span将是父级的名称，并具有类似

#alaska-2-heading

的id

如果选择了所有子项，则标题将被隐藏，这是由该脚本实现的（在排除脚本中也是相同的）

排除脚本 检查所有儿童 崩溃儿童

---

这非常接近于满足需求，但有两个问题。第一个是，如果包含一个子元素，它将为每个子元素创建一个新的父元素，而不是将所有子元素嵌套在一个父元素下。此外，如果一个子项被排除，它会将列表2中所有新创建的父项返回到列表1。有什么办法可以防止这种情况发生吗？请你解释一下，第二个列表上的家长应该在什么时候出现，什么时候不应该出现。我想我对此有点困惑。关于另一个问题，我修复了它，并更新了我回答中的演示链接。因此，列表2中的家长应该在且仅当有一个孩子时出现？这让我感到困惑，因为在您上面的第一条评论中，您还提到，如果出于某种原因，列表2中的家长消失了，那么列表1中的所有孩子都包括在内，并且不能被看到或用于选择/取消选择所有的子项，因此在这种情况下，如果所有的子项都被添加，则意味着父项将被隐藏，对吗？请纠正我，如果我遗漏了什么，请检查一下。我对清单二做了一些修改。请让我知道这是否有效。这太完美了。非常感谢。对不起，误会了。

$('.include').click(function(e) {
  var $checks = $("input:checked");
  $.each($checks, function(k, v) {
    var tempid = $(this).parent().data('id');
    var element = $(this).parent().detach();
    if (!$('#two #' + tempid + '-2').length) {
      var ol = $('<ol></ol>').attr('id', tempid + '-2');
      var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
      ol.prepend(heading);
      $('#two').append(ol);
    }
    $('#two #' + tempid + '-2').append(element);
    if ($('#two #' + tempid + '-2').children('li').length == 3) {
      $('#two #' + tempid + '-2-heading').hide();
    } else {
      $('#two #' + tempid + '-2-heading').show();
    }
  });
});

if (!$('#two #' + tempid + '-2').length) { // check if alaska-2 is present
  var ol = $('<ol></ol>').attr('id', tempid + '-2');
  var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
  ol.prepend(heading);
  $('#two').append(ol);
}

if ($('#two #' + tempid + '-2').children('li').length == 3) {
  $('#two #' + tempid + '-2-heading').hide();
} else {
  $('#two #' + tempid + '-2-heading').show();
}

$('.exclude').click(function(e) {
  var $checks = $("input:checked");
  $.each($checks, function(k, v) {
    var tempid = $(this).parent().data('id');
    var element = $(this).parent().detach();
    $('#one').find('#' + tempid + ' ul').append(element);
    if ($('#two #' + tempid + '-2').children('li').length == 3) {
      $('#two #' + tempid + '-2-heading').hide();
    } else {
      $('#two #' + tempid + '-2-heading').show();
    }
  });
});

$('#one span.parent').on('click', function() {
  var checked = $(this).parent().find('input').prop('checked');
  $(this).parent().find('input').prop('checked', !checked);
});

$('#one span.collapse').on('click', function() {
  $(this).parent().find('ul').slideToggle();
});