складная список с помощью JQuery

<script> 
    $(document).ready(function(){ 
      var xml = "<root> \ 
       <method name='A'> \ 
       <childcall name='B'></childcall> \ 
       <childcall name='C'></childcall> \ 
       </method> \ 
       <method name='B'> \ 
       <childcall name='D'></childcall> \ 
       </method> \ 
       <method name='C'> \ 
       <childcall name='D'></childcall> \ 
       <childcall name='E'></childcall> \ 
       </method> \ 
       </root>"; 

      var data = $.parseXML(xml); 
      console.log(data); 
      $(data).find('method').each(function(){ 
       var name = $(this).attr('name'); 
       $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap'); 
       $(this).children('childcall').each(function(){ 
        name = $(this).attr('name'); 
        $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap'); 
       }); 
      }); 
     }); 

     </script> 
<body> 
    <div id="page-wrap"></div> 
</body>

Приведенный выше код пересекает XML и печатает элементы, как - ABCBDCD E. Я хочу сделать этот разборную список, как и в данной ссылке: http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery складная список с помощью JQuery

любой намек о том, как сделать его разборным?

EDIT: Спасибо за помощь. Извините, я не могу принять более одного ответа как правильно. Поэтому решение Shikiryu также является правильным.

источник

2013-04-10 user32262

Итак ... что не так с кодом в статье, которую вы используете рунец? Разве это не работает в вашем случае? –

Является ли первый '' нормальным? – Shikiryu

Исправлена метка

Используйте переключатель эффекта JQuery, это выглядит примерно так:

$("#CollapseTrigger").click(function() { 
    $("#ListToBeHidden").toggle("slow"); 
});

источник

2013-04-10 09:46:34 Peter

Первый, вам нужно создать тот же HTML, как этот пример (с использованием ул и Ли вместо DIV)

$(data).find('method').each(function(){ 
    var hasChild = $(this).children('childcall').length > 0; 
    curLi += '<li'; 
    curLi += ((hasChild) ? ' class="category plusimageapply">': '>'); 
    curLi += $(this).attr('name'); 
    if(hasChild){ 
     curLi += '<ul>'; 
     $(this).children('childcall').each(function(){ 
      var name = $(this).attr('name'); 
      curLi += '<li><a href="'+name+'">'+name+'</a></li>'; 
     }); 
     curLi += '</ul>'; 
    } 
    curLi += '</li>'; 
}); 
$('#test').append(curLi);

Обратите внимание, что она может быть оптимизирована.

Тогда, вы должны указать некоторые CSS (скрыть детей, добавляя + и - и т.д.)

.category ul{display:none;}

Наконец, вам необходимо применить их JS

$('li.category').click(function(event){ 
    if($(this).is('.plusimageapply')) { 
     $(this).children().show(); 
     $(this).removeClass('plusimageapply'); 
     $(this).addClass('minusimageapply'); 
    } 
    else 
    { 
     $(this).children().hide(); 
     $(this).removeClass('minusimageapply'); 
     $(this).addClass('plusimageapply'); 
    } 
});

Это дает: http://jsfiddle.net/dujRe/1/

источник

2013-04-10 12:02:28 Shikiryu

Смежные вопросы