Question

我在无序列表中切换嵌套html时遇到问题。我正在使用下面的代码。它会切换整个div而非li内的项目，请帮帮我... 我想使用html无序列表创建树视图，并能够创建和编辑每个创建的子节点。我希望我的输出看起来像this。

    $(document).ready(function () {

    ListOfCategoryEquipment();

    function ListOfCategoryEquipment() {
            $.ajax({
                url: "Handler/CommonHandler.ashx",
                data: "MethodName=GetCategoryEquipmentList",
                dataType: "json",
                type: "Get",
                success: function (json) {
                    debugger;
                    CallBackCategoryEquipment(json);

                },
                error: function (xhr, status) {
                    alert('Sorry,There was an Problem');
                },
                complete: function (xhr, status) {
                    // alert("Requst Complete");
                }

            }
        );



     function CallBackCategoryEquipment(data) {

            var html = '<ul>';

            for (var n in data) { // Each top-level entry

                html += '<li>' + data[n].Title + '<ol>';
                for (var i = 0; i < data[n].ChildCategoryList.length; i++) { // Each sub-entry
                    html += "<li>" + data[n].ChildCategoryList[i].Title + "<button id='testid' type='button' >Test</button>" + "</li>";
                }
                html += '</ol></li>';

            }
            html += '</ul>';
            $('#ListOfCategoryEquipment').append(html);

        }

    });

 $('#ListOfCategoryEquipment').click(function () {
 $('ol').first().toggle('slow');

 });

HTML：

<div id="ListOfCategoryEquipment" style="width:400px; margin-left:100px; border:thin solid red; background-color: #ddd;">
</div>

Answer 1

需要外部容器，它可以容纳完整的子菜单

所以我改变了这样的代码

HTML CODE：

<ul> <div> <li>1</li> <ul> <li>1.1</li> <li>1.2</li> </ul> </div> <div> <li>2</li> <ul> <li>2.1</li> <li>2.2</li> </ul> </div> </ul>

JQUERY CODE：

$("li").on('click',function () { $(this).parent().find('ul').toggle(); });

现场演示：

http://jsfiddle.net/7JPf6/78/

快乐编码：）

嵌套无序列表切换使用jQuery并在列表上添加或编辑节点

1 个答案: