Question

我正在XHTML中构建一个非常简单的无序列表树，其中包含多个级别。它的工作方式是单击父节点，它使用jQuery .load（）API向服务器发出AJAX调用，以查看此节点是否有子节点。如果是，则将这些节点插入其中。当您再次单击父链接时，它会执行.remove（）以删除子项。

Safari，Chrome和FireFox中的一切正常。但是在IE6，IE7，IE8和Opera中，它正在破碎。

在IE中，代码在扩展父母以显示孩子时起作用。但是，当我点击父母再次使用.remove（）来隐藏孩子时，它会进入孩子们并且去除他们的孩子，而不是自己。

在Opera中，代码会扩展，但会在展开时移动边距。然后，在删除时，它表现出与IE相同的问题。

什么可能导致这种陌生感？

此处发布的示例：http://volomike.com/downloads/sample1.tar.gz

Answer 1

好的，Volomike！我看了你的代码有一些问题：

首先，当您使用load时，它不会替换所选节点，而是替换其内容。

因此，您在li上调用load，但在AJAX结果中返回相同的li。随后，你得到了这个：

<li id="node-7">
   <li id="node-7">
      ...

此外，您使用</ul>行ajax.php中的两个38代码而不是一个ul和一个li来关闭它。

所以，如果你修复这些东西，它应该开始工作。也就是说，我会以完全不同的方式接近你所做的事情。我希望这会帮助你：

<强> HTML

<ul id="tree">
  <li id="node-1"><a href="#">Cat 1</a></li>
  <li id="node-7"><a href="#">Cat 7</a></li>
</ul>

<强> PHP

// You'll have to write the code, but get it into this format:
// Basically push each row of a `mysql_fetch_array` into a new array
$ret = array(
  array('2', 'Cat 2'),
  array('3', 'Cat 3')
);

// Then return it to the browser like this:
echo json_encode( $ret );

<强> JS / jQuery的

$(function(){
   $("ul#tree li a").live('click', function(e){
      e.preventDefault();
      var $li = $(this).closest('li');
      if( $li.find('ul').length ){
          // Remove UL if it exists
          $li.find('ul').remove();
      } else {
          // Get the ID
          var id = $li[0].id.replace('node-','');
          // Get the JSON for that id
          $.getJSON('/ajax.php', { id: id }, function( data ){
              // If data is not empty and it is an array
              if(data && $.isArray( data )){
                 // Build our UL
                 var $ul = $("<ul></ul>");
                 // Loop through our data
                 $.each(data, function(){
                    // Build an LI, use `text()` to properly escape text
                    // then append to the UL
                    $('<li id="node-' + this[0] + '"><a href="#"></a></li>')
                        .find('a').text(this[1])
                        .end().appendTo($ul);
                 });
                 // Finally, add the UL to our LI
                 $ul.appendTo($li);
              }
          });
      }
   });
});

解决jQuery和无序列表加载的问题

1 个答案: