jQuery用户界面可选择多个级别

我希望有多个级别的选择，但是选择函数首先触发父级，而不是子级，有时甚至不注册子级。我想做一些类似的事情：

<ul>
  <li>Level 1a
    <ul>
      <li>Level 2a</li>
      <li>Level 2b</li>
    </ul>
  </li>
  <li>Level 1b
    <ul>
      <li>Level 2c</li>
      <li>Level 2d</li>
    </ul>
  </li>
</ul>

1a级

2a级
2b级


1b级

2c级
2d级

---

关于如何注册2级物品的点击有什么想法吗？我希望覆盖它，以便在选择级别2时，它取消选择父级，并仅显示高亮显示的级别2

您希望使子项

ul

可选择，而不是父项。使用当前示例，执行以下操作：

$(function() {
    $('ul').children('li').children('ul').selectable();
 });

---

演示：

我能想到的唯一解决方案是使用无效的标记，关闭次无序列表之前的列表项，如：

<ul>
  <li>Level 1a</li>
    <ul>
      <li>Level 2a</li>
      <li>Level 2b</li>
    </ul>
  </li>
  <li>Level 1b</li>
    <ul>
      <li>Level 2c</li>
      <li>Level 2d</li>
    </ul>
  </li>
</ul>

---

这样做的目的是使除子组1之外的任何div都成为选择器。然后，我添加了一个新类click selected，因为我希望能够在保留现有选择的同时打开和关闭选择。我希望在所有子项都被选中时选择第一个级别，如果没有选中，则取消选择第一个级别，并让第一个级别打开和关闭所有子项

您是否只希望级别2的项目可以选择？不，我希望所有级别都可以选择。谢谢你看马特。不幸的是，这只会让第二个级别可选，而不是所有级别。

<div class="selectable">
  <div id="level1">Level 1</div>
  <div class="subgroup level1">
    <div id="level1a">Level 1a</div>
    <div id="level1b">Level 1b</div>
  </div>
  <div id="level2">Level 2</div>
  <div class="subgroup level2">
    <div id="level2a">Level 2a</div>
    <div id="level2b">Level 2b</div>
  </div>
</div>

$('.selectable').selectable({
  selected: function (event, ui) {
    if ($(ui.selected).hasClass('click-selected')) {
      $(ui.selected).removeClass('click-selected');
      $('.'+ui.selected.id).removeClass('click-selected');
      $('.'+ui.selected.id+' div').removeClass('click-selected');
    } else {
      $(ui.selected).addClass('click-selected');
      $('.'+ui.selected.id).addClass('click-selected');
      if ($(ui.selected).parent('.subgroup').length) {
        $(ui.selected).parent('.subgroup').removeClass('click-selected');
        var cNames = $(ui.selected).parent('.subgroup').attr('class').replace("subgroup","").split(" ");
        $.each(cNames, function(i,c){
          if ($(ui.selected).parent('.subgroup').children().length == $(ui.selected).parent('.subgroup').children('.click-selected').length) {
            $('#'+c).addClass('click-selected');
          } else {
            $('#'+c).removeClass('click-selected');
          }
        });
      }
    }
  },
  filter: "div:not(.subgroup)"
});