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

Question

我在使我的列表按照我需要的方式进行交互时遇到问题。我需要保留我目前拥有的功能，同时添加另外两个关键部分。
我在添加这些部分而不丢失当前功能或完全破坏应用程序方面一直没有成功。
我需要能够通过单击父元素来选择/取消选择所有子元素。
我需要列表是可折叠的，并且当 parent 在第二个列表中有 child 时，我需要 parent 的名字在该列表中的 child 之上。

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

我真正遇到的问题是，为了使其可折叠，我一直在尝试使用复选框并隐藏样式，但这些都不起作用，您会明白为什么。下面的代码。

总结

• 可折叠列表

• 通过单击父级选择/取消选择所有子级

• 如果有 1 个或多个 child ，则父 ID 会出现在左侧列表中。

Fiddle

HTML:

<div class="half">
<ol id="one">
    <li id="alaska">
        Alaska
        <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>
    <li id="washington">
        Washington
        <ul>
            <li data-id="washington"><input type="checkbox"> Children 1</li>
            <li data-id="washington"><input type="checkbox"> Children 2</li>
            <li data-id="washington"><input type="checkbox"> Children 3</li>
        </ul>
    </li>
    <li id="texas">
        Texas
        <ul>
            <li data-id="texas"><input type="checkbox"> Children 1</li>
            <li data-id="texas"><input type="checkbox"> Children 2</li>
            <li data-id="texas"><input type="checkbox"> Children 3</li>
        </ul>
    </li>
</ol>
<button type="button" class="include">Include</button>
</div>
<div class="half">
<ol id="two"></ol>
<button type="button" class="exclude">Exclude</button>
</div>

CSS:

.half {
display:block;
float:left;
width:50%;
}

JavaScript:

$(function(){
$('.include').click(function(e){
    var $checks = $("input:checked");
    $.each($checks, function(k,v){
        var tempid = $(this).parent().data('id');
          var element = $(this).parent().detach();
            $('#two').append(element);

    });
});

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

Fiddle

Answer 1

更新

这是一个更新的演示 https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/19/

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

---

这是一个演示 https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/16/

应该做这样的事情

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>

包含脚本

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

单击包含按钮时，脚本将根据选中的复选框创建一个新的有序列表。 #two 下的新有序列表看起来像这样 #alaska-2。这是通过

实现的

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

除了创建一个新的有序列表 #alaska-2 之外，该脚本还会添加一个范围，该范围将是父级的名称，并且它的 ID 类似于 #alaska-2-标题。

如果所有的 child 都被选中，那么标题将被隐藏，这是通过这个脚本实现的(这在排除脚本中也是一样的)

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

检查所有 child

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

折叠 child

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