Code to implement folding menu using html, css and js

The content of this article is about the code for implementing the folding menu by combining HTML, CSS and JS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Apply the template, put the relevant information of the menu directly in the script data, and use a loop to generate

<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. Implement the menu in js by adding the class open Folding and unfolding

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

There are also some css usage skills in it, I hope you can remember

Related recommendations:

How are tables in HTML Made by manipulation? (Code example)

HTML object: Introduction to some object properties of html

The above is the detailed content of Code to implement folding menu using html, css and js. For more information, please follow other related articles on the PHP Chinese website!