Expanding-Collapsable HTML List-ul-li

Я пытаюсь реализовать список с расширением-сбой ul и li: Я динамически строю li из json-файла, но не могу сделать его сбрасываемым. .Expanding-Collapsable HTML List-ul-li

Я пытаюсь со статической декларацией первым, а затем динамическая, моего JS рушится код работает с статическим, но не динамическим :(не знает, почему

Вот мой код:

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<style> 
ul li ul { 
    display: none; 
    margin-left:15px; 
    padding:10px; 
} 

a { 
    color: red; 
} 

</style> 
<script type="text/javascript"> 
    $(window) 
      .load(
        function() { 
         var JSON = { 
          menu : [ { 
           name : 'Title', 
           link : '#', 
           sub : null 
          },{ 
           name : 'Link', 
           link : '#', 
           sub : null 
          },{ 
           name : 'Content', 
           link : '#', 
           sub : null 
          },{ 
           name : 'Enclosures', 
           link : '#', 
           sub : [ { 
            name : 'Enclosure1', 
            link : '#', 
            sub : null 
           }, { 
            name : 'Enclosure2', 
            link : '#', 
            sub : null 
           }, { 
            name : 'Enclosure3', 
            link : '#', 
            sub : null 
           } ] 
          }, { 
           name : 'Authors', 
           link : '#', 
           sub : [ { 
            name : 'Author1', 
            link : '#', 
            sub : null 
           }, { 
            name : 'Author2', 
            link : '#', 
            sub : null 
           } ] 
          },{ 
           name : 'Published At', 
           link : '#', 
           sub : null 
          }, { 
           name : 'Stream', 
           link : '#', 
           sub : [ { 
            name : 'STR1', 
            link : '#', 
            sub : null 
           }, { 
            name : 'STR2', 
            link : '#', 
            sub : null 
           } ] 
          } ] 
         } 

         $(function() { 

          function parseMenu(ul, menu) { 
           for (var i = 0; i < menu.length; i++) { 
            var li = $(ul).append(
              '<li class="content"><a href="'+menu[i].link+'">' 

                + menu[i].name 
                + '</a></li>'); 
            if (menu[i].sub != null) { 
             var subul = $('<ul id="submenu'+menu[i].link+'"></ul>'); 
             $(li).append(subul); 
             parseMenu($(subul), menu[i].sub); 
            } 
           } 
          } 

          var menu = $('#menu'); 
          parseMenu(menu, JSON.menu); 
         }); 
        });//]]> 
</script> 
</head> 
<body> 
<ul id="menu" class="list"> 
</ul> 
<script type="text/javascript"> 
$('.list > li a').click(function() { 
    $(this).parent().children('ul').toggle(); 
}); 
</script> 
</body> 

</html>

источник

2017-02-17 abr

Что вы подразумеваете под динамикой. Существует дерево DOM, а сбой и расширение будут работать на основе этого дерева DOM. –

Jijo Cleetus я отредактировал код, я просто хочу составить список, чем я создаю с помощью json-данных. – abr

Надеюсь, что он работает нормально –

Просто измените статический .click() привязку быть динамичным

$(document).on('click', '.list > li a', function() { 
    $(this).parent().children('ul').toggle(); 
})

При использовании .event() вы объявляете событие для всех элементов, которые в настоящее время находятся в DOM. Поскольку вы загружаете элементы JSON и append, событие click не видит новых элементов и ничего не делает (поэтому он работает с предопределенным DOM).

При использовании $('static-element-selector').on('event', 'dynamic-element-selector') вы связываете событие со статическим элементом и Слушайте новые элементы.

источник

2017-02-17 15:19:58 Justinas

может дать конкретный пример, пожалуйста? – abr

@AbderraoufBarrak Можете ли вы предоставить структуру DOM после загрузки JSON? – Justinas

Что вы подразумеваете под структурой DOM – abr

ответ

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