javascript – 在for循环的迭代中什么可能导致html和脚本的行为不同？

我正在尝试建立一个侧面导航栏,其中列出类别,单击类别后,子类别的子列表将显示在类别的下方.如果再次点击类别,则子列表合同.

所以我正在跨类别对象运行一个循环.在这个外部循环中,我包含了一个内部循环,用于列出子类别和一个隐藏子菜单的脚本,并且仅当点击类别时才滑动它.我使用django模板标签为我的html元素动态分配类名,并在脚本中引用它们.所以,对于循环迭代,有一个子类别列表和每个类别的专用脚本,并且它们具有唯一的类名称,因此没有重叠的机会.所以奇怪的是,这对大多数类别都是完美的,但是一些类别和子菜单保持打开状态,当点击页面重新加载的类别时.

我不明白,什么可能导致完全相同的代码(在for循环中运行)的行为如此不同？

这是我的代码：

@H_616_8@{% load staticfiles %} {% load i18n pybb_tags forumindexlistbycat %} {% caTindexlist as caTindexlisted %} {% block body %}<div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 body-container leftsidenavigator" style="margin-top:15px;"> <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 leftsidenavigator-inner" style="padding:0px;"> <h2><center>Categories</center></h2> <ul class="caTindexlist catlistcat nav-collapse89"> {% for category in caTindexlisted %} <li class="caTindexlistitem category-name{{Category.namE}}{{Category.namE}}" style="font-weight:600;padding-right:20px;"><a href="">{{Category.namE}}</a></li> <ul style="padding:0px;" class="nav-collapse88"> {% for forum in category|forumindexlistbycat %} <li class="catlistforum{{Category.namE}}{{Category.namE}} forum-name" style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.namE}}</a></li> {% endfor %}</ul><script> $(function() { $(".catlistforum{{Category.namE}}{{Category.namE}}").hide(); $(".category-name{{Category.namE}}{{Category.namE}} a").click(function(E) { e.preventDefault(); $(".catlistforum{{Category.namE}}{{Category.namE}}").slideToggle(); if(!($(this).parent('li').siblings('div').children('ul').children('div').is(":visible"))){ $(this).parent('li').siblings('div').children('ul').children('div').is(":visible").slideToggle(); }}); }) </script> {% endfor %} </ul> </div> </div> {% endblock %} {% block theme_script %}<script src="{% static "pinax/js/theme.js" %}"></script>{% endblock %}