什么可能导致html和脚本在for循环的迭代中表现不同？

Question

我正在尝试构建一个侧面导航栏,其中列出了类别,并且在单击类别时,相应的子类别子列表显示在类别下方.如果再次单击该类别,则子列表会收缩.

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

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

这是我的代码:

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

Answer 1

最可能的原因是使用 {{category.name}} 作为类名。

代码片段没有显示category.name 接受哪些值，我的猜测是它可以是用户输入？请参阅“属性值”部分中的命名规则，了解什么是对类名有效的。

它可以使用模板标签slugify ({{category.name|slugify}}) 来解决，但我的建议是尝试重新设计解决方案。