jquery实现点击<ul>，相应的<li>折叠

{% extends "./report.html"%} 
{%load staticfiles%}
{%block jstable%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        $("li").hide();                   <!--实现点击ul，li自动折叠-->
        $("ul").click(function(){
            $(this).children().toggle();
        });     
    });

</script>
{%endblock jstable%}
{% block table %}
<tr>
   <td>
       <p>{{lines.id}}</p>
   </td>
   <td>
       <p>{{lines.name}}</p>
   </td>
   <td>
         {% for key,value in lines.channel.items %}
         <ul style="font-weight:bold">({{key}})
              {% for item in value %}
              {% for key,value in item.items %}
              <li style="list-style-type:none; margin:8px; font-weight:400">{{key}}:&nbsp;&nbsp;{{value}}</li>
                    {% endfor %}             
               {% endfor %} </ul>
          {% endfor %} 
   </td>
   <td>
       <p>{{lines.number}}</p>
   </td>

</tr>
{% endblock %}

结果如下：