Code pour implémenter un menu pliant en utilisant HTML, CSS et JS

Le contenu de cet article concerne le code d'implémentation du menu pliant en combinant HTML, CSS et JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Appliquez le modèle, mettez les informations pertinentes du menu directement dans les données du script et utilisez une boucle pour générer

<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. js. Réalisez le pliage et le dépliage du menu

               $(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();
                  }
              }
              // 监听一级菜单结束

Il contient également quelques compétences d'utilisation du CSS J'espère que vous vous en souviendrez

Recommandations associées :

HTML Comment est réalisée la table ? (Exemple de code)

Objet HTML : introduction à certaines propriétés d'objet du HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!