Javascript 子菜单在单击时拒绝打开

我正在尝试创建一个左侧导航栏，默认情况下会在其中列出类别，当单击类别时，子类别会显示在它下面（在“排序展开”子菜单中）。我在Django工作，下面是我代码的相关部分。当我包含

JS

代码时，页面上的所有链接都不起作用，当我排除它时，默认情况下会显示所有类别的所有子类别。我只需要在默认情况下显示类别，当单击任何类别时，将显示相应的子类别。我错过了什么

JS代码：在页面底部，在页脚后加载：

{% block theme_script %}
<script src="{% static " pinax/js/theme.js " %}"></script>
<script>
  $(function() {
    $(".nav-collapse88").hide();
    $(".nav-collapse89 a").click(function(e) {
      e.preventDefault();
      $(".nav-collapse88", $(this).parent()).slideToggle();
    });
  })
</script>
{% endblock %}

{%block theme\u script%}
$（函数（）{
$（“.nav-collapse88”）.hide（）；
$（“.nav-collapse89 a”）。单击（功能（e）{
e、 预防默认值（）；
$（.nav-collapse88），$（this.parent（））.slideToggle（）；
});
})
{%endblock%}

我的HTML： My CATEGORYINDEX.HTML模板：

{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}

{% catindexlist as catindexlisted %}

{% block body %}
<div class="col-md-12 col-xs-12 body-container leftsidenavigator" style="margin-top:15px;">
    <div class="col-md-12 col-xs-12 leftsidenavigator-inner" style="padding:0px;">
        <h2><center>Categories</center></h2>
            <ul class="catindexlist catlistcat nav-collapse89">
                {% for category in catindexlisted %}
                    <div class="catindexlistitem">
                        <li class="category-name" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}</a></li></div>
                <div class="nav-collapse88">
                    <ul style="padding:0px;">
                    {% for forum in category|forumindexlistbycat %}
                        <div class="catlistforum"><li style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}</a></li></div>
                    {% endfor %}
                    </ul>
                </div>
                {% endfor %}
            </ul>
    </div>
</div>
{% endblock %}

{%load staticfiles%}
{%load i18n pybb_标记forumindexlistbycat%}
{%catindexlist作为catindexlisted%}
{%block body%}
类别

{catindexlisted%中类别的百分比}


{类别中论坛的百分比| forumindexlistbycat%}

{%endfor%}

{%endfor%}

{%endblock%}

MY SITE_BASE.HTML：

<div class="col-md-2" style="border-right:solid;text-align:right;height:99%;padding:0 0 0 0px;" id="sidebar"> {% include "categoryindex.html" %} </div>

{%include“categoryindex.html”%}

---

所有回答的人都将赢得一匹神奇的小马！谢谢，

使用

父级

同级

的概念，您可以这样做：

代码片段

$（函数（）{
$（“.category name a”）.parent（'li'）.parent（'div'）.sides（'div'）.hide（）；
$（“.category name a”）。单击（函数（e）{
e、 预防默认值（）；
$（“.category name a”）.parent（'li'）.parent（'div'）.sibbines（'div'）.slideUp（）；
如果（！（$（this.parent（'li'）。parent（'div'）。sibbines（'div'）。是（“：visible”））{
$（this）.parent（'li'）.parent（'div'）.sibbines（'div'）.slideToggle（）；
}
});
})

{catindexlisted%中类别的百分比}


{类别中论坛的百分比| forumindexlistbycat%}

{%endfor%}

{%endfor%}


{catindexlisted%中类别的百分比}


{类别中论坛的百分比| forumindexlistbycat%}

{%endfor%}

{%endfor%}


{catindexlisted%中类别的百分比}


{类别中论坛的百分比| forumindexlistbycat%}

{%endfor%}

{%endfor%}

这就是你想要的吗？几乎。这段代码当前在我单击任何类别时展开所有子菜单。我只需要它来展开单击的类别。您应该尝试调试并查看在

$（“.nav-collapse88”，$（this.parent（））

中得到的内容-我猜由于某种原因，此查询会返回空列表。代码段似乎工作正常，但当我尝试在我的项目中时，它还隐藏了我的所有类别，并使我的导航栏完全空白。我现在正试图修改你的代码。编辑你的问题并发布完整的HTML，这样调试就会更容易。可能存在DOM问题。