javascript - Submenu refuses to open on click -
i'm trying make left side navigation bar by-default categories listed , while clicking on category, subcategories shown under (in sort expanding sub-menu). i'm working in django , relevant portions of code below. when include js code, none of links on page work , when exclude it, subcategories categories shown by-default. need categories shown default , while clicking on any, respective subcategories shown. i'm missing here?
js code: @ bottom of page, loaded after footer:
{% 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 %} my html: categoryindex.html template:
{% load staticfiles %} {% load i18n pybb_tags forumindexlistbycat %} {% catindexlist 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"> {% 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;"> {% 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 %} 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> all answer win magical pony! thanks,
using concept of parent siblings can as:
code snippet
$(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"> {% 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;"> {% 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"> {% 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;"> {% 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"> {% 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;"> {% 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>
Comments
Post a Comment