三级菜单的展开与收起功能

本文详细讲解如何实现HTML三级菜单的动态展开与收起功能,内容包括使用CSS和JavaScript进行交互设计,以及在不同设备上的响应式布局策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML:

<div class="st_tree">
                    <ul class="housebox">
                        <li class="parent"><a href="#" ref="unit">磁带生成单位</a></li>
                        <ul show="true">
                            <li><a href="#" ref="kw">科委</a></li>
                            <li><a href="#" ref="nw">农委</a></li>
                            <li><a href="#" ref="jw">纪委</a></li>
                        </ul>
                        <li class="parent"><a href="#" class="house">库房</a></li>
                        <ul class="ul_son">
                            <li><a href="#" ref="num1">一柜</a></li>
                            <ul class="ul_son1">
                                <li><a href="#" ref="num1_1">一排</a></li>
                                <li><a href="#" ref="num1_2">二排</a></li>
                                <li><a href="#" ref="num1_3">三排</a></li>
                            </ul>
                            <li><a href="#" ref="num2">二柜</a></li>
                            <ul class="ul_son2">
                                <li><a href="#" ref="num2_1">一排</a></li>
                                <li><a href="#" ref="num2_2">二排</a></li>
                                <li><a href="#" ref="num2_3">三排</a></li>
                            </ul>
                            <li><a href="#" ref="num3">三柜</a></li>
                            <ul class="ul_son3">
                                <li><a href="#" ref="num3_1">一排</a></li>
                                <li><a href="#" ref="num3_2">二排</a></li>
                                <li><a href="#" ref="num3_3">三排</a></li>
                            </ul>
                        </ul>
                    </ul>
                </div>

js:

 //单位库房的生成-鼠标移过的背景
    $('.st_tree .ul_son1  li a').each(function () {
        var html = $(this).html();
        $(this).click(function () {
            //除当前选择,其它全部移除背景
            $('.st_tree .ul_son1 li a').each(function () {
                var undeline1 = $(this).html();
                if (html == undeline1) {
                    $(this).parent().addClass("tree_bg");
                    //  $('.ul_son2 a').removeClass('nobg');
                } else {
                    $(this).parent().removeClass("tree_bg");
                }
            })
        })
    });
    $('.st_tree .ul_son2  li a').each(function () {
        var html = $(this).html();
        $(this).click(function () {
            //除当前选择,其它全部移除背景
            $('.st_tree .ul_son2 li a').each(function () {
                var undeline2 = $(this).html();
                if (html == undeline2) {
                    $(this).parent().addClass("tree_bg");
                } else {
                    $(this).parent().removeClass("tree_bg");
                }
            })
        })
    });
    $('.st_tree .ul_son3  li a').each(function () {
        var html = $(this).html();
        $(this).click(function () {
            //除当前选择,其它全部移除背景
            $('.st_tree .ul_son3 li a').each(function () {
                var undeline3 = $(this).html();
                if (html == undeline3) {
                    $(this).parent().addClass("tree_bg");
                } else {
                    $(this).parent().removeClass("tree_bg");
                }
            })
        })
    })
});

css:

.st_tree{
     width:21.18%;
    border:1px solid #6CB3E3;
    top:8.2%;
    margin-left:10.12%;
    position:absolute;
    float:left;
    overflow:auto;
    overflow-x:scroll;
  
}
.st_tree a{ 
	text-decoration:none; 
    color:#000; 
    font-family:"黑体";
    font-size:0.875em;
}
.st_tree a:hover{ 
	color:#1F90D5; 
	text-decoration:underline;
}
.st_tree a:active{ 
	color:#000; 
	text-decoration:none;
}
.st_tree a:checked{
    color:#000; 
	text-decoration:underline;
}
.st_tree .housebox{
    width:100%;
}
.st_tree ul{ 
    width:100%;
	padding:0 18px; 
	margin:0; 
}
.housebox li{
    font-size:0.875em; 
	color:#000; 
	line-height:18px; 
	cursor:pointer;
	list-style:none; 
}

/*2级*/
.housebox ul{
    padding:0 28px; 
}
/*1级*/
.parent{
    background:url('../img/select_down.png') no-repeat 0% 70%;
    padding-top:5%;
}
.parent a{
    padding-left:10%;
}
/* 子菜单 */
.st_tree ul li ul{}
/* 子菜单项 */
.st_tree ul li ul li{}
.housebox{
    padding:0 !important;
}
/* 子菜单的父节点 */
.st_tree .folder{ 
	list-style-image:url(img/select_down2.png); 
    background-repeat:no-repeat; 
	padding:0 0 0 10px; 
	background:url(../img/select_down.png) no-repeat 5% 60%; 
}
/* 展开的父节点 */
.st_tree .open{ 
	list-style-image:url(img/select_down.png) ; 
    background-repeat:no-repeat; 
	padding:0 0 0 10px; 
	background:url(../img/select_down2.png)no-repeat  5% 60%; 
}
.ul_son .folder{
    list-style-image:url(img/select_down2.png); 
    background-repeat:no-repeat; 
    background:url(../img/select_down.png) no-repeat  5% 60%; 
    padding:0 0 0 20px; 
}
.ul_son .open{
    list-style-image:url(img/select_down.png) ; 
    background-repeat:no-repeat; 
	padding:0 0 0 20px; 
	background:url(../img/select_down2.png)no-repeat 5% 60%; 
}
.tree_bg{
    text-decoration:underline;
}
.nobg{
     text-decoration:none;
}
.st_tree li a{
    text-overflow:ellipsis;word-break:keep-all; white-space:nowrap;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值