Question

我希望有多个选择级别，但是选择功能首先触发父级，而不是子级，有时甚至不会注册子级。我想做点什么：

<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>

有关如何点击2级项目注册的任何想法？我希望覆盖它，以便在选择级别2时，它取消选择父级并仅显示级别2突出显示。

Answer 1

你想让孩子ul可选，而不是父母。使用当前示例，执行以下操作：

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

DEMO：http://jsfiddle.net/dirtyd77/FHBMq/1/

Answer 2

我可以提出无序列表的唯一解决方案是通过在二级无序列表之前关闭列表项来使用无效标记，如：

<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>

我不喜欢这样，所以我设置了如下结构：

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

这样做使得任何div都是选择器，除了子组1。然后我添加一个新的单击选择类，因为我希望能够在保持现有选择的同时打开和关闭选择。如果所有孩子都被选中或者未被选中，我希望选择第一个级别，如果他们不是，并且第一级别打开和关闭所有孩子。

jQuery UI可选择多个级别

2 个答案: