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

最新推荐文章于 2022-03-02 19:01:18 发布

原创最新推荐文章于 2022-03-02 19:01:18 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的表格数据展示方法，该方法能够在点击表头时实现子项的自动折叠效果。文章通过具体代码展示了如何利用jQuery来控制列表项的显示与隐藏，适用于希望提高网页交互体验的前端开发者。

{% 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 %}

结果如下：