子菜单点击后无法打开

Question

子菜单点击后无法打开

5

我正在尝试创建一个左侧导航栏，在默认情况下列出类别，单击类别时，其下的子类别将显示在其中（以展开子菜单方式）。我正在使用 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 %}

我的HTML代码：我的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 %}

我的 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>

所有回答问题的人都将赢得一只神奇的小马！谢谢。

- Dr Confuse

1

这是您想要的吗？JSFiddle - vivekkupadhyay

几乎了。目前这段代码在我点击任何类别时都会展开所有子菜单。我需要它只展开被点击的那个类别。 - Dr Confuse

你应该尝试调试一下，看看在 $(".nav-collapse88", $(this).parent()) 中返回了什么 - 我猜测这个查询由于某些原因会返回一个空列表。 - Ronen Ness

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vivekkupadhyay · Accepted Answer

使用 parent 和 siblings 的概念，你可以这样做：

代码片段

 $(function() {
   $(".category-name a").parent('li').parent('div').siblings('div').hide();
   $(".category-name a").click(function(e) {
     e.preventDefault();
     $(".category-name a").parent('li').parent('div').siblings('div').slideUp();
     if(!($(this).parent('li').parent('div').siblings('div').is(":visible"))){
       $(this).parent('li').parent('div').siblings('div').slideToggle();
     }
   });
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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}}01</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}}01</a></li>
      </div>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</ul>
<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}}02</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}}02</a></li>
      </div>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</ul>
<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}}03</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}}03</a></li>
      </div>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</ul>