co może spowodować, że html i skrypt będą się zachowywać w różnych iteracjach pętli for?

Question

Próbuję utworzyć boczny pasek nawigacyjny, w którym są wymienione kategorie, a po kliknięciu w kategorię podmiejska lista odpowiednich podkategorii jest wyświetlana tuż pod kategorią. A jeśli kategoria zostanie kliknięta ponownie, lista podrzędna jest kontrakty.

Przeprowadzam pętlę między obiektami kategorii. Wewnątrz tej zewnętrznej pętli zawieram wewnętrzną pętlę, aby wyświetlić podkategorie oraz skrypt, który ukrywa podmenu i ślizga się po nim tylko po kliknięciu kategorii. Używam znaczników szablonów django do dynamicznego przydzielania nazw klas dla moich elementów HTML oraz do odnoszenia się do nich w skrypcie. Więc po wszystkim dla iteracji pętli, istnieje lista podkategorii i dedykowany skrypt dla każdej kategorii i mają unikalne nazwy klas, więc nie ma szans na nakładanie się. Dziwne jest to, że działa to doskonale dla większości kategorii, ale niektóre kategorie i ich podmenu pozostają otwarte, a po kliknięciu na kategorię strona ładuje się ponownie.

Nie rozumiem, co mogłoby spowodować, że ten sam kod (uruchamiany w pętli for) zachowywał się tak różnie?

To jest mój kod:

{% load staticfiles %} 
{% load i18n pybb_tags forumindexlistbycat %} 
{% catindexlist as catindexlisted %} 

{% block body %}<div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 body-container leftsidenavigator" style="margin-top:15px;"> 
    <div class="col-sm-12 col-md-12 col-xs-12 col-lg-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{{category.name}}{{category.name}}" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}</a></li> 
         <ul style="padding:0px;" class="nav-collapse88"> 
         {% for forum in category|forumindexlistbycat %} 
           <li class="catlistforum{{category.name}}{{category.name}} forum-name" style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}</a></li> 
         {% endfor %}</ul><script> 

         $(function() { 
           $(".catlistforum{{category.name}}{{category.name}}").hide(); 
            $(".category-name{{category.name}}{{category.name}} a").click(function(e) { 
            e.preventDefault(); 
            $(".catlistforum{{category.name}}{{category.name}}").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(); 
              }}); 
             }) 
           </script> 
          {% endfor %} 
          </ul> 
         </div> 
         </div> 
        {% endblock %} 
    {% block theme_script %}<script src="{% static "pinax/js/theme.js" %}"></script>{% endblock %} 

Answer 1

Najbardziej prawdopodobną przyczyną jest użycie {{category.name}} dla nazw klas.

Fragment kodu nie pokazuje, jakie wartości są akceptowane dla category.name i moje przypuszczenie, że może to być dane wejściowe użytkownika? Zobacz naming rules w sekcji Atrybut Wartości, co jest ważne dla nazw klas.

Można go rozwiązać za pomocą znacznika szablonu slugify ({{category.name | slugify}}), ale moją rekomendacją jest próba ponownego zaprojektowania rozwiązania.

Answer 2

Czy jest jakaś szansa, że ​​kategoria nazwa zawiera spacje?

Wskazówka: nie używasz dobrej praktyki w swoim kodzie. IMO powinieneś otrzymać swój kod javascript na zewnątrz gry i usunąć klasy {{ category_name }}. catindexlistitem po kliknięciu należy przełączyć ukrytą klasę (zauważyłem, że używasz bootstrap) do jej dziecka ul.

Dodając bardziej ogólny detektor zdarzeń, upraszczasz kod i za pomocą css poprawiasz wydajność. Jeśli chcesz dodać efekty, nadal możesz z css3.

Answer 3

Spróbuj napisać funkcję javascript po zewnętrznej pętli for, czasami może się to nakładać i przekierowywać. A także spróbuj podać spacje między nazwami kategorii wewnątrz "li".

Answer 4

Moja rada to oczyścić system JS, wykonując jedną funkcję obsługującą wszystkie kliknięcia. Już używasz zajęć z kliknięć, więc dlaczego jedna funkcja nie ma obsługiwać wszystkich kliknięć?

<script> 
    $(function() { 
    // Hide all elements with a class starting with catlistforum 
    $('[class^="catlistforum"]').hide(); 

    // Assign clicks to all links whose parent has a class starting with catlistforum 
    // (Though why are you hiding the parents? How will they click the links?) 
    $('[class^="catlistforum"] a').on("click", function(e) { 
     e.preventDefault(); 

     // Delegate slideToggle to each click target 
     $(e.target).slideToggle(); 

     // This seems redundant, but hopefully it will behave the way you want it to behave 
     if(!($(e.target).parent('li').siblings('div').children('ul').children('div').is(":visible"))) { 
     $(e.target).parent('li').siblings('div').children('ul').children('div').is(":visible").slideToggle(); 
     } 
    }); 
    }) 
</script> 

Oczywiście, gdybym był tobą, to bym po prostu zdefiniować dwie nowe klasy (np catlistforum-hide i catlistforum-toggle), które chciałbym zastosować do wszystkich elementów chciałem ukryć i przełącznik, odpowiednio.