子菜单拒绝点击打开

Posted 2023-02-24

【中文标题】子菜单拒绝点击打开

【英文标题】：Submenu refuses to open on click

【发布时间】：2017-01-20 14:39:28

【问题描述】：

我正在尝试制作一个左侧导航栏，其中列出了默认类别，并且在单击类别时，子类别显示在其下方（在排序扩展子菜单中）。我在Django 工作，我的代码的相关部分如下。当我包含JS 代码时，页面上的所有链接都不起作用，当我排除它时，默认情况下会显示所有类别的所有子类别。我只需要默认显示类别，单击任何类别时，都会显示相应的子类别。我在这里缺少什么？

JS CODE：在页面底部，在页脚之后加载：

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

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

【问题讨论】：

这是你想要的吗？ JSFiddle

差不多。当前，当我单击任何类别时，此代码会展开所有子菜单。我需要它来仅扩展被点击的类别。

你应该尝试调试，看看你在$(".nav-collapse88", $(this).parent()) 中得到了什么——我猜这个查询由于某种原因返回空列表..

【参考方案1】：

使用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.name01</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.name01</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.name02</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.name02</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.name03</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.name03</a></li>
      </div>
      % endfor %
    </ul>
  </div>
  % endfor %
</ul>

【讨论】：

嗯，sn-p 似乎工作正常，但是当我在我的项目中尝试时，它也隐藏了我的所有类别，让我的导航栏完全空白。我现在正在尝试修改您的代码。

编辑您的问题并发布您的完整 HTML，以便我认为调试会更容易。可能存在 DOM 问题。