0

我正在 XHTML 中构建一个非常简单的无序列表树，具有多个层次。它的工作方式是单击父节点，然后它使用 jQuery .load() API 向服务器进行 AJAX 回调，以查看该节点是否有子节点。如果是这样，它会将这些节点插入其中。当您再次单击父链接时，它会执行 .remove() 删除子链接。

在 Safari、Chrome 和 FireFox 中一切正常。但是在 IE6、IE7、IE8 和 Opera 中，它正在崩溃。

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

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

什么可能导致这种奇怪？

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

4

1 回答 1

1

好的，沃洛迈克！我看了你的代码，有几个问题：

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

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

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

此外，您在行中使用两个</ul>标签而不是 one和 one来关闭它。ajax.php38ulli

因此，如果您解决了这些问题，它应该开始工作。也就是说，我会以完全不同的方式处理你正在做的事情。我希望这可以帮助你：

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);
              }
          });
      }
   });
});
于 2010-01-16T01:34:11.430 回答