Я пытаюсь создать боковую навигационную панель, где указаны категории, и при нажатии на категорию соответствующий подкатегорий подкатегорий показан прямо под категорией. И если категория нажата снова, подписок списывается.
Итак, я запускаю цикл через объекты категории. Внутри этого внешнего цикла я включаю внутренний цикл для перечисления подкатегорий и script, который скрывает подменю и slidetoggles его только при нажатии на категорию. Я использую теги шаблона django, чтобы динамически назначать имена классов для моих элементов html, а также ссылаться на них в script. Итак, в конце концов для итераций цикла есть список подкатегорий и выделенный script для каждой категории, и у них есть уникальные имена классов, поэтому нет возможности перекрытия. Итак, странная часть, это отлично работает для большинства категорий, но некоторые категории и их подменю остаются открытыми и при нажатии на категорию перезагружается страница.
Я не понимаю, что может привести к тому, что тот же самый код (запущенный в цикле 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 %}