Question

我是jquery的新手，想制作一个滑动表。 orinal表有3个级别：

<ul class="categories">
<li id="category1">1 element</li>  //parentid=0
<li id="category2">2 element</li>  //parentid=0
<ul>
<li id="category3">1 element of element id2</li>  //parentid=2
<ul>
<li id="category4">1 element id3</li>  //parentid=3
</ul>
</li>
</ul>
</li>
</ul>

第一级元素有parentid = 0，id = 1 ++，下一级有嵌套parentid并且有自己的id等等。

页面加载只有1级，parentid = 0。

<ul class="categories">
<li id="category1">1 element</li>  //parentid=0
<li id="category2">2 element</li>  //parentid=0
</ul>

然后我想点击li，获取id ID - 转到文件，执行mysql，在变量中获取新表，将其恢复并在LI下滑动它。

php方

if(isset($_POST['subcategory'])){
    $subcategory = str_replace('category', '', $_POST['subcategory']);  
    echo build_category_tree($subcategory); // builds the UL tree
}

这会返回我的ID，我需要返回列表并切换它。

现在新的UL已连接但是我的jquery无法使用它，用下面的脚本更新脚本但仍然无法使用。

更新的JQuery

    $(".tablecategoryname").on('click', function(){
    var $a = $(this).closest('li').attr('id');
    var $c = $(this).closest('li');

    $.ajax({
       type: "POST",
       url: "functions.php",
       data: {subcategory:$a},
       cache: false,
       success: function(data)
       {
            $(data).hide().insertAfter($c).slideDown(400);
       }
     });    
});

Answer 1

ID不应只包含一个数字（或以数字开头），您应该使用#a1或类似的东西。在data参数中你发送的是一个对象，而equalsigns确实没有用。

$(".table li").on('click', function(){
    var self = this;
    $.ajax({
       type: "POST",
       url: "functions.php",
       data: {id : self.id},
       cache: false
    }).done(function(data) {
        //guessing you're returning valid HTML
        $(data).hide().insertAfter(self).slideDown(400);
    });
});

修改

您的build_category_tree（）函数需要返回HTML，以便您可以将其回显给ajax请求：

if(isset($_POST['subcategory'])){ echo $subcategory = str_replace('category', '', $_POST['subcategory']); $ULtree = build_category_tree($subcategory); // builds the UL tree echo $ULtree; //echo back to Ajax }

Answer 2

你应该在你的主ul中放一个id来抓住他的父母，然后他们切换主ul里面的列表。

$（“ul.umenu＆gt; li）.click（function（e）{

    e.preventDefault();

    var element = $(this);

    if (element.parent().find("ul").is(":visible")) {
    } else {

        $("ul.umain> li > ul").slideUp();

        element.parent().find("ul").slideToggle("fast");

    }

});

加载数据，插入后和滑动切换

2 个答案: