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と、選択したノードが置き換えられるのではなく、その内容が置き換えられます。

そのため、ロードを呼び出していますが、AJAX の結果liでも同じものを返しています。liその後、これを取得しています：

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

また、 oneと oneではなく、行に 2 つの</ul>タグを付けて閉じていました。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 に答える