2

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

<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 显示为突出显示。

4

2 回答 2

0

您希望使子ul项可选，而不是父项。使用您当前的示例，执行以下操作：

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

演示：http: //jsfiddle.net/dirtyd77/FHBMq/1/

于 2013-02-13T21:35:45.123 回答
0

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

<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 成为除子组之一之外的选择器。然后我添加了一个新的单击选择的类，因为我希望能够打开和关闭单击选择，同时保留现有的选择。如果所有孩子都被选中，我希望第一个级别被选中，如果他们没有被选中，我希望第一个级别打开和关闭所有孩子。

于 2013-02-14T13:27:28.703 回答