0

我敢肯定这很容易，但我正在用头撞墙。

我基本上是使用 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();
    });

国民党

4

1 回答 1

0 
$('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>");
        });
    });
}
于 2013-01-10T15:29:31.747 回答