Code zum Implementieren des Faltmenüs mithilfe von HTML, CSS und JS

Der Inhalt dieses Artikels befasst sich mit dem Code zur Implementierung des Faltmenüs durch die Kombination von HTML, CSS und JS. Ich hoffe, dass er für Sie hilfreich ist.

1. Wenden Sie die Vorlage an, fügen Sie die relevanten Informationen des Menüs direkt in die Skriptdaten ein und verwenden Sie eine Schleife, um

<script id="templateNavBar" type="text/html">
    <p class="nav-bar-logo">

    </p>
    {{each $data as item i}}
        <p class="nav-item {{item.class}}">{{item.name}}</p>
        {{if item.child != null}}
            <p class="childgroup">
                {{each item.child as child i}}
                    <p class="nav-item {{child.class}} child">{{child.name}}</p>
                {{/each}}
            </p>
        {{/if}}
    {{/each}}
</script>

2 zu generieren die offene Klasse Falten und Entfalten

               $(document).on('click','.nav-item:not(.child)',function () {
              console.log("choosing");
              var that = $(this);
              var next =that.next();
              if(next.hasClass('childgroup')){
                  if (that.hasClass('open'))
                  {
                      // 收起当前菜单项
                      that.removeClass('open');
                      next.slideUp();
                  }
                  else{
                      // 将其他打开的菜单项收起来
                      if($('.nav-item:not(.child).open').next().hasClass('childgroup'))
                      {
                          $('.nav-item:not(.child).open').next().slideUp();
                          $('.nav-item:not(.child).open').removeClass('open');
                      }
                      // 激活当前菜单项
                      that.addClass('open');
                      next.slideDown();
                  }
              }
              // 监听一级菜单结束

Es sind auch einige CSS-Nutzungsfähigkeiten enthalten. Ich hoffe, Sie können sich daran erinnern

Verwandte Empfehlungen:

Wie Tabellen in HTML werden durch Manipulation hergestellt? (Codebeispiel)

HTML-Objekt: Einführung in einige Objekteigenschaften von HTML

Das obige ist der detaillierte Inhalt vonCode zum Implementieren des Faltmenüs mithilfe von HTML, CSS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!