Question

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

如果所有孩子都不在右边的列表中，那么父母不应该出现在那里，但是父母应该总是在左边。

我真正遇到的问题是，为了让它可折叠，我一直在尝试使用复选框，并隐藏样式，但这些都没有用，而且你会看到为什么。代码如下。

总结

可折叠列表
点击父
如果有一个或多个孩子，则会在左侧列表中显示父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/hb9j8ua7/1/

我将在这里解释重要的内容。

单个列表项的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>

我已添加将标题包装在title范围内，并添加了一个按钮以切换列表中的collapse。

JS for include

$('.include').click(function(e){
        var $checks = $("#one input:checked");
        $.each($checks, function(k,v){
            var $parent = $(this).parent();
            var tempid = $parent.data('id');
            var element = $parent.detach();            
            element.prepend('<span class="state-name">' + tempid + '</span><br>');
            $('#two').append(element); 
        });
    });

重构一下，只在变量中捕获一次父级。在分组state-name之前添加一个范围，以显示所包含子项上方的州名。

JS崩溃并自动选择

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

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

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

点击标题会将所有子项复选框标记为checked。

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

Answer 2

更新

以下是更新的演示 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-heading。

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

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

当前列表可折叠，父元素可选

2 个答案:

更新

HTML结构看起来像这样

包含脚本

排除脚本

检查所有孩子

崩溃儿童