H5手机级联菜单的简单实现

本文系原创，转载请注明出处：
https://blog.csdn.net/chengbao315/article/details/105649923

前端开发时，页面菜单的数量和内容经常会发生变动，从技术层面讲，也就是html代码的动态添加和属性设置。本文的目标是实现下面这样的一个菜单效果：

实现这样的效果，首先我采用静态的方式构建菜单样式，以便于了解菜单的层次结构，之后进行Html代码的动态添加移植。
比如说现在这个例子，静态的html 代码为：

<div id='menu' class="container-fluid col-xs-6">  
    <div class="list-group">
        <a class="list-group-item active">内科</a>
        <a class="list-group-item">外科</a>
        <a class="list-group-item">专家门诊</a>
        <a class="list-group-item">妇科</a>
        <a class="list-group-item">儿科</a>
      </div>
    </div>
    
<div id='menu_child' class="container-fluid col-xs-6">
    <div class="list-group">
        <a class="list-group-item">门诊风湿免疫科</a>
        <a class="list-group-item">门诊血液内科</a>
        <a class="list-group-item">门诊肾脏内科</a>
        <a class="list-group-item">门诊消化内科</a>
        <a class="list-group-item">门诊神经内科</a>
        <a class="list-group-item">门诊内分泌科</a>
    </div>
</div>

动态添加Html代码总结起来有两种方式，一种是构造html字符串，添加到父节点；另一种通过js方法给父节点添加子节点进行添加。

一．构造html字符串
这种方式非常简单粗暴，先用字符串拼接出html 代码，然后应用jqurey 的apend方法添加到父节点。

从静态的Html代码中，可以看到一级菜单的节点id 为‘menu’，因此可以构造一个方法进行动态加载菜单：

function addMenu(data){
    var head = '<div class="list-group">';
    var foot = '</div> </div>'
         var body = '';
    for(var i =0; i< data.length;i++){
      var active = '';
      if(i==0) {
        active = 'active';
      } 
      body+='<a class="list-group-item ' + active + '">' + data[i] + '</a>';
    }
    $('#menu').append(head + body + foot);
  }

在页面初始化时，从后端获取菜单数据，调用addMenu方法动态加载菜单（下面的代码调用后端服务获取数据的部分省略了）：

  $(function(){
     var menu = ['内科','外科','专家门诊','妇科','儿科'];
    addMenu(menu);
  })

以同样的方式可以实现动态加载次级菜单，这里不再举例。

这种方式动态添加代码，实现层级结构比较简单的需求是比较合适的，但是如果层次结构比较复杂，变量赋值比较多，这种方式很容易出错，因为字符串本身不容易校验Html的语法规则，这时可以使用另一种方式进行代码的动态添加。

二. 节点构造法
这种方式先构造需要的标签节点，对节点进行属性赋值，value赋值，然后再添加到父节点。原理非常简单，直接上代码：

  function addMenu2(data){
    var group = document.createElement('div');
    group.setAttribute('class','list-group');

    for(var i =0; i< data.length;i++){
      var item = document.createElement('a');
      if( i==0) {
        item.setAttribute('class', 'list-group-item active');
      } 
      else{
        item.setAttribute('class', 'list-group-item');
      }
      item.innerHTML = data[i];
      group.append(item);
    }
    $('#menu').append(group);
  }

这种方式动态添加代码，不需要考虑Html标签语法的合法性，所有的属性赋值都是调用方法实现的，子节点直接添加到父节点，父节点再添加到祖父节点，层次结构非常清晰，对于层次结构复杂的代码非常适合。

三. 一级菜单和次级菜单的绑定
动态添加 Html 代码的两种方式已经掌握了，接下来要实现一级菜单和次级菜单的绑定。绑定的方式有很多，比如每次点击事件都重新生成子菜单的 Html代码；或者初始化时一次性生成，然后将未激活的菜单进行隐藏等，这里我选择了第二种方式。

实现菜单绑定，首先需要给一级菜单添加一个唯一识别属性“id”，在添加次级菜单函数中，给组添加类名为一级菜单的 id，根据点击的一级菜单的 id 即可对次级菜单的组进行控制。
添加次级菜单代码：

  function addChild(id, data){
    var group = document.createElement('div');
    group.setAttribute('class','list-group ' + id);

    for(var i =0; i< data.length;i++){
      var item = document.createElement('a');
      item.setAttribute('class', 'list-group-item');
      item.innerHTML = data[i];
      group.append(item);
    }
    $('#menu_child').append(group);
  }

次级菜单的添加函数增加了入参 id，用于两级菜单的绑定，在初始化函数中，需要调用次级菜单添加方法，同时注册鼠标点击事件，具体实现代码如下：

$(function(){
    var menu = ['内科','外科','专家门诊','妇科','儿科'];
    var child1 = ['门诊风湿免疫科', '门诊血液内科','门诊肾脏内科','门诊消化内科','门诊神经内科','门诊内分泌科'];
    var child2 = ['门诊骨科', '门诊皮肤科','门诊耳鼻喉科','门诊眼科'];
    addMenu2(menu);
    addChild(0, child1);
    addChild(1, child2);
    $('.1').hide();

    $(".list-group-item").on("click",function(){
      if($(this).parent().parent().attr('id')== "menu"){
        // 获取id
        var id = $(this).attr('id');
        var oldid = $('.active').attr('id');
        // 切换active状态
        $('.active').removeClass('active');
        $(this).addClass('active');
        // 加载子菜单
        $('.'+oldid).hide();
        $('.'+id).show();
      }
    })
  })

以上就实现了动态加载菜单以及一级菜单、次级菜单的绑定跳转功能，在点击次级菜单的时候，通常会跳转二级界面，跳转过程中会传递参数，这部分内容在后续文章中会进行阐述。

如果本文有帮到你，记得加关注哦
源码地址：https://download.csdn.net/download/chengbao315/12346130
————————————————
版权声明：本文为CSDN博主「愤斗的程序猿」的原创文章，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chengbao315/article/details/105649923