jquery动态展示多层数据，完成手风琴样式

是文静的

已于 2022-04-18 16:45:13 修改

阅读量702

点赞数

文章标签： jquery

于 2022-04-18 16:42:05 首次发布

本文链接：https://blog.csdn.net/qq_44091061/article/details/124253160

版权

在这里插入图片描述

<div class="ct">
  <div class="jeshi_tree">
    <div id="el_tree_1000000" class="v sidebar">
      <div class="cls"></div>
    </div>
  </div>
</div>
<script>
  var skillData = []
  var skillData = new Array();
  var categoryData = []
  var categoryData = new Array();
/* 获取军工、人工智能、医疗部分数据 */
  function skillRender() {
    var url = `/api/v1/skillCategory?q=list`
      $.ajax({
        type: 'Get',
        url:url ,
        // data: pageParam,
        dataType: "json",
        success: function (response) {
          // 将数据渲染到页面
          // Dom.html('');
          skillData = response.result.data;
          drawingRender()
        }
      })
  }
  skillRender()
	
	//获取军工行业1 、军工行业2 部分全部数据
  function categoryRender() {
    var url = `/api/v1/projectCategory?q=list`
      $.ajax({
        type: 'Get',
        url:url ,
        // data: pageParam,
        dataType: "json",
        success: function (response) {
          // 将数据渲染到页面
          // Dom.html('');
          categoryData = response.result.data;
          drawingRender()
        }
      })
  }
  categoryRender()

  /* 遍历展示类别 外层军工、人工智能、医疗部分数据展示 */
  function drawingRender() {
    var Dom = $('.sidebar')
    Dom.empty()
    $.each(systemParameterData, function(parameterIndex, parameterValue) {
    	//第一个默认展开
      if (parameterIndex === 0) {
        var TitleHtml = `
        <div>
          <div class="kstl" οnclick="clickNav(this)" id=${parameterValue.record_id}>
            <a >${parameterValue.chn_name}</a>
          </div>
          <div class="ksbd cur" id=${parameterValue.record_id}>
            <ul class="parameter${parameterValue.record_id}">
            </ul>
          </div>
        </div>
        `
      } else {
        var TitleHtml = `
        <div>
          <div class="kstl" οnclick="clickNav(this)" id=${parameterValue.record_id}>
            <a >${parameterValue.chn_name}</a>
          </div>
          <div class="ksbd navItem" id=${parameterValue.record_id}>
            <ul class="parameter${parameterValue.record_id}">
            </ul>
          </div>
        </div>
        `
      }
      
        Dom.append(TitleHtml);
        drawingCategoryRender(parameterIndex,parameterValue.record_id)
     })
    
  }
  /* 大类别下的类别分类 军工行业1、军工行业2数据展示 */
  function drawingCategoryRender (parameterIndex,categoryId) {
    $.each(categoryData, function(categoryIndex, categoryValue) {
    	//将军工技能1、军工技能2展示到军工分类下
      if (categoryValue.category_id ===  categoryId) {
        var categoryHtml = `
        <li><a class="categoryLink" οnclick="clickCategory('${categoryValue.record_id}','category')">${categoryValue.chn_name}</a></li>
        `
      }
        $( `.parameter${categoryId}`).append(categoryHtml);
    })
  }
	//点击展开
  function clickNav(obj){
    $(".ksbd").addClass('navItem')
    var showEle = $(obj).next()
    showEle.removeClass('navItem')
    showEle.addClass('cur')
  }
</script>
<style>
  .cur{
    display: block;
  }
  .navItem {
    display: none;
  }
  .categoryLink{
    cursor: pointer;
  }
</style>