jquery 一二级点击展开收起

  $('.medias-wrap').on('click', 'input[name*="xmfenlei"]', function(){
        console.log('点击分类了吗2', callFenLeiThis);
        var xmFenLeiThis = $(this);
        var xmFenLeiDiv =  $(this).next();
        callFenLeiThis = xmFenLeiThis; // 存储当前点击的 input 便于赋值
        if (callFenLeiThis) {
            xmFenLeiThis.attr('value', callFenLeiThis.val());
            console.log('其他3xmFenLeiThis', callFenLeiThis.val());
        } else {
            console.log('其他4xmFenLeiThis');
        }
        xmFenLeiData = [
            { level1: '一级项目1', level2: ['二级项目1', '二级项目2', '二级项目3'] },
            { level1: '一级项目2', level2: ['二级项目4', '二级项目5', '二级项目6'] },
            { level1: '一级项目3', level2: ['二级项目8', '二级项目9', '二级项目10'] },
        ];
        generateHTML(xmFenLeiData,xmFenLeiDiv); // 走接口 获取数据 并赋值数据 
        console.log('xmFenLeiData', xmFenLeiData);
    });
    

// 分类 一二级  start=================


var callFenLeiThis =''
 $('.medias-wrap').on('click', 'input[name*="xmfenlei"]', function(event) {
        console.log('是否激活l ne  ', event, $(this));
        event.stopPropagation(); // 阻止事件冒泡到 document
        
        // var innerElement = $(this).find('.xmfenlei_inner');
        var innerElement = $(this).siblings('.xmfenlei_inner')
        innerElement.toggle(); // 切换显示/隐藏状态
    });



// 监听鼠标移入事件
$(document).on('mouseover', '.xmfenlei_inner .level-1, .xmfenlei_inner .sub-item', function() {
    $(this).addClass('mouseInBg'); // 添加鼠标移入时的背景色
});

// 监听鼠标移出事件
$(document).on('mouseout', '.xmfenlei_inner .level-1, .xmfenlei_inner .sub-item', function() {
    $(this).removeClass('mouseInBg'); // 移除鼠标移出时的背景色
});



// 根据数据生成HTML结构
function generateHTML(data,xmDiv) {
    console.log('data',data,xmDiv,xmDiv)
    data.forEach(function(item) {
        var itemHTML = '<ul class="list"><li class="item"><div class="level-1"><span class="botIcon">▼</span><span class="rightIcon">▶</span>' + item.level1 + '</div><ul class="sub-list ">';
        item.level2.forEach(function(subItem) {
            itemHTML += '<li class="sub-item"  onclick="handleClickFl(\'' + subItem + '\')" >' + subItem + '</li>';
        });
        itemHTML += '</ul></li></ul>';
        if(xmDiv){
            console.log('yeyyey')
            xmDiv.append(itemHTML);
        }else {
            console.log('找不到了')
        }
       
    });
}

// 处理点击事件
function handleClickFl(subParam) {
    // 找到最外层节点的 class 为 xmfenlei_placholer 的元素
// var outerElement = $('.xmfenlei_placholer');
// // 在最外层节点下找到 class 为 padding_div 的元素，并设置其文本内容为subParam
// outerElement.find('.padding_div').text(subParam);
console.log('点击了二级项目，参数为：', subParam);
callFenLeiThis.val(subParam);
}

// 监听二级项目的鼠标移入事件
$(document).on('mouseover', '.xmfenlei_inner .level-1, .xmfenlei_inner .sub-item', function() {
    $(this).addClass('mouseInBg'); // 添加鼠标移入时的背景色
});

// 监听二级项目的鼠标移出事件
$(document).on('mouseout', '.xmfenlei_inner .level-1, .xmfenlei_inner .sub-item', function() {
    $(this).removeClass('mouseInBg'); // 移除鼠标移出时的背景色
});



// 处理显示隐藏icon 和 是否收起一级菜单
$(document).on('click', '.level-1', function(event) {
        // 阻止事件冒泡，防止点击事件传播到父级元素
        event.stopPropagation();
    var subList = $(this).next();
    console.log('subList',subList)
    subList.toggleClass('levelhidden');
    
    // 切换图标的显示与隐藏
    if (subList.hasClass('levelhidden')) {
        $(this).find('.botIcon').hide(); // 显示 botIcon
        $(this).find('.rightIcon').show(); // 隐藏 rightIcon
    } else {
        $(this).find('.botIcon').show(); // 隐藏 botIcon
        $(this).find('.rightIcon').hide(); // 显示 rightIcon
    }
});



// 加载数据并生成HTML
// generateHTML(fetchData());


// 分类 一二级 end=================