Question

我试图制作一个垂直的侧面导航栏，其中填充了类别（动态，从django模型中获取），其中每个类别都有子类别（也是动态的，从模型中获取）。当我在JS代码中引用类时，代码工作，即，在点击类别时，打开由其各自子类别组成的子菜单。但问题是，当我点击任何类别时，所有类别都会扩展以显示所有子类别。我只想要一个点击它，打开并保持打开状态。

我的HTML：

{% 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 %}
                    <li class="catindexlistitem category-name" style="font-weight:600;padding-right:20px;"><a href="" id="category-name{{category.name}}">{{category.name}}</a></li>
                    <ul style="padding:0px;" class="nav-collapse88">
                        {% for forum in category|forumindexlistbycat %}
                            <li class="catlistforum forum-name" id="{{category.name}}{{forum.name}}" style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}</a></li>
                        {% endfor %}</ul>
                {% endfor %}
            </ul></div></div>{% endblock %}

我的非理想但有效的Javascript：

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

这是chrome dev工具控制台中出现的内容：

我需要这样的工作：

$(function() {
   $(".catlistforum").hide();
   $(".category-name a").click(function(e) {
     e.preventDefault();
     $(".catlistforum").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();
     }});
 })

此代码，当我点击任何类别时，重新加载页面并且不显示子菜单。请记住，我已经用于循环，因此最终的HTML将有几个类别，每个类别都有几个子类别。

如何引用Django动态生成的ID？这是我将脚本放在页面中的位置问题 - 因为，通过% extends %和% includes %链，此脚本在页面底部附带其他脚本，在我的页脚之后渲染。我在这里缺少什么？

Answer 1

我不确定完全理解你的代码中有三件事情困扰我：

在两个列表中，您在'ul'和'li'之间使用'div'。我不确定它是否正确/可能导致问题。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
在你的第一个Jquery代码中，你使用函数child（），你的意思是孩子（）？
在你的第一个Jquery代码中，我不理解'if'语句。我可能读得太快但在我看来它说：“如果没有看不到不相关的子菜单，那么请切换所有不相关和可见的子菜单”。不确定这是不是我的错误。

但是，如果我理解你想做什么（显示所点击类别的子菜单，并隐藏所有其他类别），基于你的html结构（无论我的问题nº1，那么）我认为这样可行（一次）再次：基于你的html结构）：

    $(function() {
      $(".catlistforum").hide();
        $(".category-name a").click(function(e) {
          e.preventDefault();
          $(".nav-collapse88").hide();
          $(this).parent('li').parent('div').next('.nav-collapse88').show();
        });
     })

我个人会更改Html结构以退出上面提到的'divs'。您可以为每个类别使用“li”，其中包含两个“div”：一个用于显示项目的类“catindexlistitem”，另一个用子类“nav-collapse88”隐藏 - 用于子菜单。再次在Javascript中，您可以使用与上面相同的步骤：隐藏所有'.nav-collapse'并仅显示所单击项旁边的那个。

希望它有所帮助，祝你好运

如何在我的JS代码中使用Python Django变量？

1 个答案: