javascript学习-菜单的折叠与选中高亮显示

最新推荐文章于 2021-03-27 13:54:00 发布

原创最新推荐文章于 2021-03-27 13:54:00 发布 · 543 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用JavaScript实现菜单的折叠效果，通过setTimeout模拟slideDown和slideUp，并实现菜单项的选中高亮显示。文章中给出了HTML、slideDown、slideUp的实现细节以及完整代码，适合初学者学习。

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

简述：

本来想着自己用 javascript 写一个类似 jquery 里 slideDown 和 slideUp 的效果，于是就弄了 setTimeout 定时器写了，后面才发现各种问题暴露，哈哈哈。现在代码还有一个鼠标多次点击菜单会奔溃的问题没有改回来，如果想深入研究的话可以看看这篇文章，写的很详细了（因为小编也是参照这篇文章学习的）

样式演示

在这里插入图片描述

1、简单的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单折叠与展开</title>
    <style type="text/css">

        .down{
            margin: 0 auto;
            width: 300px;
        }

        ul ,h5 {
            padding: 0;
            margin: 0;
        }
        .lis{
            margin-bottom: 10px;
            width: 300px;
            border: 1px solid #dddd;
            list-style: none;
        }
        h5{
            width: 300px;
            line-height: 30px;
            text-align: center;
            background-color: #dddd;
        }
        .down ul li {
            padding: 10px;
            list-style: none;
            text-indent: 24px;
            border-bottom: 1px dashed #6666;
        }

        .down ul{
            display: none;
            overflow: hidden;
        }

    </style>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
    <ul class="down">
        <li class="lis">
            <h5>广东省</h5>
            <ul>
                <li>广州市</li>
                <li>深圳市</li>
                <li>佛山市</li>
                <li>东莞市</li>
                <li>惠州市</li>
            </ul>
        </li>
        <li class="lis">
            <h5>浙江省</h5>
            <ul>
                <li>杭州市</li>
                <li>绍兴市</li>
                <li>台州市</li>
                <li>宁波市</li>
                <li>衡州市</li>
            </ul>

        </li>
        <li class="lis">
            <h5>湖南省</h5>
            <ul>
                <li>长沙市</li>
                <li>株洲市</li>
                <li>衡阳市</li>
                <li>岳阳市</li>
                <li>怀化市</li>
            </ul>
        </li>
    </ul>

</body>
</html>

2、slideDown 的部分

主要是给显示 " block " 部分添加一个定时器，隔 10 ms 增加一定的 height , 直到增加的高度等于 offsetHeight 的高度就清除定时器，这样就能到达一个 slidedown 的效果。

//slidedown 效果

function slideDown(element,time) {
        element.style.display = "block";
        var totalHeight =element.offsetHeight;
        element.style.height = 0;
        var currentHeight =0;
        // 每次增加的高度
        var addHeight = totalHeight/(time/10);
        var timer1 = setTimeout(function down() {
            currentHeight = currentHeight + addHeight;
            // element.style.transition ="height 1s";
            element.style.height= currentHeight + "px";
            if(currentHeight>=totalHeight){
                clearTimeout(timer1);
                element.style.height = totalHeight + "px";
            } else {
                setTimeout(down,10)
        }
        },10);
}

3、slideUp 部分

这部分的实现，和 slideDown 部分是差不多的，就是增加的高度变为减少多少高度就可以了

//slideup 效果
function slideup(element,time) {
            var totalHeight = element.offsetHeight;
            var currentHeight = totalHeight;
            var subHeight = totalHeight/(time/10);
            var timer2 = setTimeout(function up() {
            currentHeight = currentHeight-subHeight;
            // element.style.transition ="height 1s";
            element.style.height = currentHeight+"px";
            if(currentHeight<=0){
                clearTimeout(timer2);
                element.style.display = "none";
                element.style.height = totalHeight + 'px';
            }else {
                setTimeout(up,10)
                }
            },10)
}

4、选中高亮部分

这部分有看不懂的可以结合完整的代码查看，有一些值是结合其他部分的。
获取需要选中高亮部分的内容 var getLI = getSubUl[this.index].getElementsByTagName("li"); 然后通过 for 循环遍历，给每个 li 添加点击事件，再增加 css 属性值即可。

		var getLI = getSubUl[this.index].getElementsByTagName("li");
        for (var i=0;i<getLI.length;i++){
                    getLI[i].index = i ;
                    getLI[i].onclick = function () {
                        getLI[this.index].style.backgroundColor="lightblue";
                        getLI[this.index].style.color="white";
                        // 判断是否是上一个点击的 li 标签
                        if(getLI[oldnum]){
                            getLI[oldnum].style.backgroundColor="";
                            getLI[oldnum].style.color=""
                        }
                        oldnum = this.index;
                    }
                }

5、完整的代码


window.onload = function () {
    var getUl = document.getElementsByClassName("down")[0];
    var getMenu = document.getElementsByTagName("h5");
    var getSubUl = getUl.getElementsByTagName("ul");
  	// 储存上一个点击的菜单做判断用
    var oldmenu = null;
    // 储存上一个点击的 li 做判断用
    var oldnum = null;
    for(var i=0; i<getMenu.length;i++){
        getMenu[i].index = i;
        getSubUl[i].index = i;
        // 下拉菜单
        getMenu[i].onclick = function () {
            // 下拉
            if(getSubUl[this.index].offsetHeight == 0) {
                slideDown(getSubUl[this.index],300);
                // 单点菜单，当前的显示，其它的关闭
                if(getSubUl[oldmenu]){
                    slideup(getSubUl[oldmenu], 300);
                }
                oldmenu = this.index;
                var getLI = getSubUl[this.index].getElementsByTagName("li");
                //选中高亮显示
                for (var i=0;i<getLI.length;i++){
                    getLI[i].index = i ;
                    getLI[i].onclick = function () {
                        getLI[this.index].style.backgroundColor="lightblue";
                        getLI[this.index].style.color="white";
                        if(getLI[oldnum]){
                            getLI[oldnum].style.backgroundColor="";
                            getLI[oldnum].style.color=""
                        }
                        oldnum = this.index;
                    }
                }
            }
            // 上拉
            else {
                slideup(getSubUl[this.index], 300)
                oldmenu = null
            }

        }

    }

};

//slidedown 效果
function slideDown(element,time) {
        element.style.display = "block";
        var totalHeight =element.offsetHeight;
        element.style.height = 0;
        var currentHeight =0;
        // 每次增加的高度
        var addHeight = totalHeight/(time/10);
        var timer1 = setTimeout(function down() {
            currentHeight = currentHeight + addHeight;
            // element.style.transition ="height 1s";
            element.style.height= currentHeight + "px";
            if(currentHeight>=totalHeight){
                clearTimeout(timer1);
                element.style.height = totalHeight + "px";
            } else {
                setTimeout(down,10)
        }
        },10);
}



//slideup 效果
function slideup(element,time) {
            var totalHeight = element.offsetHeight;
            var currentHeight = totalHeight;
            var subHeight = totalHeight/(time/10);
            var timer2 = setTimeout(function up() {
            currentHeight = currentHeight-subHeight;
            // element.style.transition ="height 1s";
            element.style.height = currentHeight+"px";
            if(currentHeight<=0){
                clearTimeout(timer2);
                element.style.display = "none";
                element.style.height = totalHeight + 'px';
            }else {
                setTimeout(up,10)
                }
            },10)
}