0

展開折りたたみ効果を追加しようとしていますが、機能していません:(

Here is my fiddle

http://jsfiddle.net/Pervez/udc8f/6/

編集：

また、これらの「li」を2列に並べて配置したい

4

3 に答える 3

1
  1. あなたid='chk_7''は余分を持ってい'ます。jsfiddle 構文の強調表示ではっきりと確認できます。
  2. チェックボックスをラベル内にラップすることをお勧めします（ラベルのクリックがチェックボックスのクリックとして機能するようにします）
  3. チェックボックスではなくクリックした場合にのみ、少しうまく機能<li>します。

他にもいくつかの小さなバグがあり、いくつかのバグが残っていました。デバッグを練習することをお勧めします (つまり、ブレークポイントの設定、コードのステップ実行など)。チェックボックスのクリックといくつかの修正を処理するように変更しました: http://jsfiddle.net/jjfaB/4/。まだ完全ではありませんが、独自のデバッグを行う必要があります...

于 2013-01-31T11:01:12.457 に答える
1

これは、私が作成したツリー ビューの簡単な例です。基本的に、コードを整理する方法を示しています。はっきりと見えない場合、どうすればそれを操作できますか。

超簡単な実装

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8" />
      <title></title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
      <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

      <script>
    $(document).ready(function(){
            $('.parent >ul').each(function(){ $(this).hide();});

            $('.parent >label').click(function(){

               $(this).parent().find('ul').each(function(){  
                  $(this).toggle();

               });
            });

    });
  </script>
</head>
<body>
<ul>
    <li class='parent'>
        <label value="*">*</label><input type="checkbox" value="" />
        <ul>
           <li><input type="checkbox" value="" class="child"/></li>
           <li><input type="checkbox" value="" class="child"/></li>
           <li><input type="checkbox" value="" class="child"/></li>
        </ul>
    </li>
    <li class='parent'>
        <label value="*">*</label><input type="checkbox" value="" />
        <ul>
            <li><input type="checkbox" value="" class="child"/></li>
            <li><input type="checkbox" value="" class="child"/></li>
        </ul>
    </li>
<ul>
</body>
</html>

n レベルのノード、アニメーション、ID ごとの検索、各レベルでの異なる色などに拡張できます。

于 2013-01-31T11:04:37.763 に答える
-1

私は自分のプロジェクトの1つにjstreeを使用しました。http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/4_themes.html ..それがあなたに役立つかどうかを確認してください。

于 2013-01-31T10:58:50.900 に答える