Question

我确信这很容易，但是我正撞在墙上。

我基本上是使用jQuery，JSON和PHP创建动态生成的浏览树（基于这种方法：http://www.electrictoolbox.com/json-data-jquery-php-mysql/）。我已将下拉框更改为ul li菜单。在'a'单击事件中，我查询数据库并返回下一组数据的值。这一切都有效。我只是很难让新返回的列表在被点击的li下“嵌套”。例如：

<ul id='levelone'>
 <li><a id='cats' href='#'>Cats</a></li>
 <li><a id='dogs' href='#'>Dogs</a></li>
 <li><a id='fish' href='#'>Fish</a></li>
</ul>

如果用户点击'dogs'，我的PHP / JSON事件会查询数据库并返回列表：

<ul id='leveltwo'>
 <li><a id='hounds' href='#'>Hounds</a></li>
 <li><a id='shepherds' href='#'>Shepherds</a></li>
 <li><a id='poodles' href='#'>Poodles</a></li>
</ul>

这有效，但我希望列表显示为页面上“狗”下的嵌套列表。像这样：

<ul id='levelone'>
 <li><a id='cats' href='#'>Cats</a></li>
 <li><a id='dogs' href='#'>Dogs</a></li>
     <ul id='leveltwo'>
      <li><a id='hounds' href='#'>Hounds</a></li>
      <li><a id='shepherds' href='#'>Shepherds</a></li>
      <li><a id='poodles' href='#'>Poodles</a></li>
    </ul>
 <li><a id='fish' href='#'>Fish</a></li>
</ul>

我尝试过各种各样的方法，但都没有。我确信有一个简单的按钮我很想念......任何帮助都会受到赞赏。

生成leveltwo列表的jQuery如下：

    function populateAmimalSubcategory() {
    $.getJSON('./includes/browsedata/animalsubcat.php', { animalcategory:       
       $('#ucHidden').val() }, function (data) {
        $("#animalsubcat").append("<ul id='subcatlist'></ul>");
        $.each(data, function (val, text) {
        $("#subcatlist").append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>");
        });
    });

当单击一级div中的项目时调用该函数：

    $('#animallist a').live('click', function(){
        document.getElementById('ucHidden').value = this.id;
        $('#animalsubcat').empty();
        populateAnimalSubcategory();
    });

KMT

Answer 1

$('body').on('click', "#animallist > li > a", function(){
    var myli = $(this).parent();
    $('.animalsubcat', myli).remove();
    populateAnimalSubcategory(myli);
});

function populateAmimalSubcategory(myli) {
    $.getJSON('./includes/browsedata/animalsubcat.php', {
        animalcategory: $('#ucHidden').val()
    }, function (data) {
        $(myli).append("<ul class='animalsubcat'></ul>");
        $.each(data, function (val, text) {
            $(".animalsubcat", myli).append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>");
        });
    });
}

jquery动态嵌套列表

1 个答案: