확장 가능 HTML List-ul-li

ul과 li의 expand-collapse 목록을 구현하려고합니다. json 파일에서 li을 동적으로 구성하고 있지만 접을 수는 없습니다. . 내가 먼저 다음 동적 하나가 무너 코드는 정적하지만 :(동적하지 작동 내 JS 이유를 알 수없는 정적 선언으로 노력하고확장 가능 HTML List-ul-li

여기

내 코드입니다 :

<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을로드하고 요소를 추가하기 때문에 클릭 이벤트에 새 요소가 표시되지 않고 아무 것도 수행하지 않습니다. 따라서 미리 정의 된 DOM에서 작동합니다.

$('static-element-selector').on('event', 'dynamic-element-selector')을 사용하면 이벤트를 정적 요소 에 바인딩하고은 새로 추가 된 요소를 수신합니다.

출처

2017-02-17 15:19:58 Justinas

구체적인 예를 들어주세요. – abr

@AbderraoufBarrak JSON을로드 한 후 DOM 구조를 제공 할 수 있습니까? – Justinas

DOM 구조가 무엇을 의미합니까 – abr

답변

관련 문제