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

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

好的，沃洛迈克！我查看了您的代码，发现存在一些问题：

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

因此，您在 li 上调用 load，但也在 AJAX 结果中返回相同的 li。随后，您会得到以下结果：

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

此外，您在 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);
              }
          });
      }
   });
});