JSコードでPython Django変数を使用するにはどうすればよいですか？

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(); 
    }}); 
}) 

これは、クロームの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(); 
    }}); 
}) 

このコードは、カテゴリをクリックするとページをリロードし、サブメニューは表示されません。 forループを使用したことに注意してください。最終的なHTMLには、いくつかのサブカテゴリを持ついくつかのカテゴリがあります。

Djangoによって動的に生成されたIDを参照するにはどうすればよいですか？ % extends %と% includes %のチェーンを通じて、このスクリプトは、フッターがレンダリングされた後、ページの下部に他のスクリプトが付属しているため、ページにスクリプトを配置する配置問題ですか？私はここで何が欠けていますか？私は3つの事はあなたのコードで私を気にして完全に理解していることがわからない

Answer 1

：両方のあなたのリストに

1. を、あなたは「UL」の間の「DIV」と「李」を使用しています。私はそれが正しいかどうかわからない/問題を引き起こす可能性があります。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
2. 最初のJqueryコードでは、関数child（）を使用していますが、これはchildren（）ですか？
3. 最初のJqueryコードでは、私は 'if'ステートメントを理解していません。私はあまりにも速くそれを読んでいるかもしれませんが、それは言う： "無関係なサブメニューが表示されない場合、slideToggleすべての無関係で目に見えるサブメニュー"。それが私の過ちかどうかわからない。

あなたの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(); 
     }); 
    }) 

Personnally私は上記mentionned「divを」終了するHTML構造を変更します。表示されたアイテムには 'catindexlistitem'クラス、サブメニューには 'nav-collapse88'クラスで隠されたクラスがあります。ここでもJavascriptで、上記と同じ手順を使用できます：すべての '.nav-collapse'を非表示にし、クリックされた項目の横にあるもののみを表示します。

希望、幸運を願う