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

順序付けられていないリストを思いつく唯一の解決策は、次のように、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 をセレクターにすることです。次に、既存の選択を維持しながら、選択のオンとオフをクリックできるようにするため、新しいクラスのクリック選択を追加します。すべての子が選択されている場合は最初のレベルを選択し、選択されていない場合は選択を解除し、最初のレベルですべての子のオンとオフを切り替えたいと考えました。

于 2013-02-14T13:27:28.703 に答える