如何将多个事件添加到可折叠列表？

Question

我正在修改购物车的后端。我需要在可折叠的嵌套列表中列出产品类别。我已经能够使用 Jochen 的代码做到这一点：

$(function() {
  $('li > ul').each(function(i) {
    var parent_li = $(this).parent('li');
    parent_li.addClass('folder');
    var sub_ul = $(this).detach();
    parent_li.find('a').click(function() {
      sub_ul.toggle();
    });
    parent_li.append(sub_ul);
  });
  $('ul ul').hide();
});

但我还需要能够在单击该类别时显示给定类别中的所有产品。我希望该事件导致页面在该点执行 mysql 调用，然后在可折叠树右侧的 div 中列出产品。

我是自学成才的，虽然我已经很擅长 php，但我已经有好几年没有在普通的旧 javascript 中做任何广泛的事情了，我担心我对 ajax 和 jQuery 感到头疼.任何帮助将不胜感激。

我尝试实施 vinceh 提出的备受赞赏的解决方案，但尽管研究了几天，我还是无法弄清楚如何使用 .data 对象将类别传递到 url。

有人对如何传递我需要的数据有任何想法吗？

提前致谢。

Answer 1

我会向您的类别项目添加一个点击事件并发送一个 AJAX 请求，该请求将从数据库中检索必要的项目并将其发送回要呈现的页面。您可以通过以下方式进行绑定：

$(".someClass").click( function() {
    $.ajax({
        url: "url/to/your/function",
        type: "GET",
        dataType: "script"
    });
});

但问题是，您需要通过 url 传递类别项，您可以通过 JQuery 将 .data 添加到您的对象中来做到这一点。

一旦服务器返回信息，你就会渲染一些东西，这取决于你的框架是怎么做的，你有不同的解决方案，但这只是一个简单的渲染动作，比如.append你所有的项目到@ 987654325@你想要的。

您可以在您的 AJAX 请求中添加很多选项，以使其完全按照您的意愿行事，请参阅this 了解更多详细信息。祝你好运！