Question

我试图添加展开折叠效果，但它不起作用：（

Here is my fiddle

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

编辑：

我也希望将这些'li'并排放在两列

中

Answer 1

您的id='chk_7''有额外'。您可以在jsfiddle语法高亮显示中清楚地看到它。
您最好将复选框包装在标签内（将使标签点击作为复选框点击工作）
它的工作情况稍好一些，但只有当您单击<li>而不是复选框时。

还有其他一些小错误，还有一些漏洞。您最好练习调试（即设置断点，踩代码等）。我将其更改为处理复选框点击并在此处进行了一些修复：http://jsfiddle.net/jjfaB/4/。它仍然不完美，但你应该做自己的调试......

Answer 2

这是我为您制作的树视图的简单示例。它基本上显示了您组织代码。如果你看不清楚，你怎么能操纵它。

超级简单的实施

    <!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智能检索，每个级别都有不同的颜色，什么不是......

Answer 3

我已经将jstree用于我的一个项目。 http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/4_themes.html ..检查它是否对你有帮助。

树视图复选框展开折叠

3 个答案: