解决jQuery和无序列表加载问题
解决jQuery和无序列表加载问题
提问于 2010-01-14 13:57:18
我正在用XHTML构建一个非常简单的、具有多层深度的无序列表树。它的工作方式是单击一个父节点，然后它使用AJAX .load() API回调服务器，以查看该节点是否有子节点。如果是这样，它会将这些节点插入到其中。当您再次单击父链接时，它会执行一个.remove()来删除子链接。
在Safari、Chrome和FireFox中，一切都运行得很好。但在IE6、IE7、IE8和Opera中，它正在崩溃。
在IE中，当展开父对象以显示子对象时，代码可以正常工作。但是，当我再次使用.remove()单击父母以隐藏孩子时，它会进入孩子并移除他们的孩子，而不是它本身。
在Opera中，代码会展开，但随后会在展开时移动边距。然后，在删除时，它会显示出与IEs相同的问题。
是什么导致了这种奇怪的现象呢？
示例张贴在此处：http://volomike.com/downloads/sample1.tar.gz
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-01-16 09:34:11
好了，沃罗米克！我看了你的代码，发现有几个问题：
首先，当您使用load时，它不会替换所选节点，而是替换其内容。
因此，您将在li上调用load，但也会在AJAX结果中返回相同的li。随后，您将得到以下结果：
<li id="node-7">
<li id="node-7">
...另外，您在ajax.php行38中使用了两个</ul>标记来结束它，而不是一个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);
}
});
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2062466
复制相关文章
相似问题
腾讯云开发者
