0

Am trying to add expand collapse effect , but its not working :(

Here is my fiddle

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

EDIT:

I also want to place these 'li' side by side in two column

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 wise 检索、每个级别的不同颜色等等。

于 2013-01-31T11:04:37.763 回答
-1

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

于 2013-01-31T10:58:50.900 回答