JS实现无延迟级联菜单

最新推荐文章于 2021-12-05 13:53:44 发布

19年，重新开始写

最新推荐文章于 2021-12-05 13:53:44 发布

阅读量824

点赞数 1

分类专栏： java-web开发 html5+css3 H5进阶文章标签： html 用户体验鼠标移动

本文链接：https://blog.csdn.net/qq_27905183/article/details/71374320

版权

java-web开发同时被 3 个专栏收录

121 篇文章 2 订阅

订阅专栏

html5+css3

50 篇文章 0 订阅

订阅专栏

H5进阶

14 篇文章 0 订阅

订阅专栏

1.一般的级联菜单，当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验：我们必须在这个li元素上平行的移动鼠标，才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下，将会显示其他的二级菜单了

2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片

3.实现代码:

//前端页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无延迟菜单</title>

<!--My CSS Link-->
<link rel="stylesheet" href="../CSS/menu.css" />

<!--Jquery JS Link-->
<script src="../JS/jquery.min.js"></script>

<!--My JS Link-->
<script src="../JS/menu.js"></script>

</head>
<body>

    <!--一级菜单-->
    <div class="wrap">  
        <ul>
            <li data-id="a">
                <span>服装/服装/服装</span>
            </li>
            <li data-id="b">
                <span>首饰/首饰/首饰</span>
            </li>
            <li data-id="c">
                <span>装扮/装扮/装扮</span>
            </li>
            <li data-id="d">
                <span>书籍/书籍/书籍</span>
            </li>
            <li data-id="e">
                <span>零食/零食/零食</span>
            </li>
            <li data-id="f">
                <span>油卡/油卡/油卡</span>
            </li>
        </ul>
    </div>

    <!--隐藏的二级菜单-->
    <div class="sub none" id="a">
        <div class="sub_content">
            <dl>
                <dt>
                    <a href="javascript:void(0);"><i>电视&gt;</i></a>
                </dt>
                <dd>
                    <a href="javascript:void(0);">品牌1</a>
                    <a href="">品牌2</a>
                    <a href="">品牌3</a>
                    <a href="">品牌4</a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="sub none" style="top: 59px;" id="b">
        <div class="sub_content">
            <dl>
                <dt>
                    <a href="javascript:void(0);"><i>电视&gt;</i></a>
                </dt>
                <dd>
                    <a href="javascript:void(0);">品牌1</a>
                    <a href="">品牌2</a>
                    <a href="">品牌3</a>
                    <a href="">品牌4</a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="sub none" style="top: 89px;" id="c">
        <div class="sub_content">
            <dl>
                <dt>
                    <a href="javascript:void(0);"><i>电视&gt;</i></a>
                </dt>
                <dd>
                    <a href="javascript:void(0);">品牌1</a>
                    <a href="">品牌2</a>
                    <a href="">品牌3</a>
                    <a href="">品牌4</a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="sub none" style="top: 119px;" id="d">
        <div class="sub_content">
            <dl>
                <dt>
                    <a href="javascript:void(0);"><i>电视&gt;</i></a>
                </dt>
                <dd>
                    <a href="javascript:void(0);">品牌1</a>
                    <a href="">品牌2</a>
                    <a href="">品牌3</a>
                    <a href="">品牌4</a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="sub none" style="top: 149px;" id="e">
        <div class="sub_content">
            <dl>
                <dt>
                    <a href="javascript:void(0);"><i>电视&gt;</i></a>
                </dt>
                <dd>
                    <a href="javascript:void(0);">品牌1</a>
                    <a href="">品牌2</a>
                    <a href="">品牌3</a>
                    <a href="">品牌4</a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="sub none" style="top: 170px;" id="f">
        <div class="sub_content">
            <dl>
                <dt>
                    <a href="javascript:void(0);"><i>电视&gt;</i></a>
                </dt>
                <dd>
                    <a href="javascript:void(0);">品牌1</a>
                    <a href="">品牌2</a>
                    <a href="">品牌3</a>
                    <a href="">品牌4</a>
                </dd>
            </dl>
        </div>

    </div>

</body>
</html>




//CSS样式
@charset "utf-8";
/* CSS Document */
.wrap{
    position:relative;
    width: 200px;
    left: 50px;
    top: 0px;
}

ul{
    list-style-type: none;
    padding: 15px 0;
    margin: 9;
    background-color: #6c6669;
    color: $fff;
    border-right-width: 0;
}

ul li{
    display: block;
    height: 30px;
    line-height:30px;
    padding-left: 12px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
}

ul li:hover{
    background-color: #CCC;
    color:#F33;
}

.none{
    display:none;
}

.sub{
    width: 600px;
    position:absolute;
    border: 1px solid grey;
    background: #f7f7f7;
    box-shadow: 2px 0 5px rgba(0,0,0,.3);
    left: 258px;
    top: 29px;  //每次加30px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
}

.sub .sub_content a{
    font-size: 12px;
    color: $666;
    text-decoration: none;
}

.sub_content dd a{
    border-left: 1px solid #e0e0e0;
    padding: 0 10px;
    margin: 4px 0;
}

.sub_content dl{
    overflow: hidden;
}

.sub_content dt{
    float: left;
    width: 70px;
    font-weight: bold;
    clear: left;
    position:relative;
}

.sub_content dd{
    float: left;
    margin-left: 5px;
    border-top: 1px solid $eee;
    margin-bottom: 5px;
}

.sub_content dt i{
    width: 4px;
    height: 14px;
    font: 400 9px/14px consolas;
    position: absolute;
    right: 5px;
    top: 5px;
}







//JS核心代码
// JavaScript Document
$(function(){

    //鼠标经过子元素，显示对应的div
    var activediv = "";
    var timer;
    var entersub = false;
    $.fn.mouseenterfun = function(){

        //第一次进入一级菜单
        if(activediv == ""){
            //显示当前需要显示的div
            activediv = $(this).data('id');
            $("#"+activediv).removeClass("none");
            return ;
        }

        $li = $(this);

        //先隐藏之前显示出来的div
        timer = setTimeout(function(){

            //如果进入了子菜单，则清除timer,实现无延迟菜单的关键
            if(entersub == true){
                clearTimeout(timer);
                return;
            }
            $("#"+activediv).addClass("none");
            activediv = $li.data('id');
            $("#"+activediv).removeClass("none");
            timer = null;
        },100);
    };
    $(".wrap").on("mouseenter","li",$.fn.mouseenterfun);

    //鼠标移出一级菜单则隐藏现在显示的二级菜单
    $.fn.mouseleavefun = function(){

        setTimeout(function(){
            if(activediv != "" && entersub == false){
                $("#"+activediv).addClass("none");
            }
        },10);
    };
    $(".wrap").mouseleave($.fn.mouseleavefun);

    //判断鼠标是否移入了二级菜单中,用于同activediv变量一起进行判断是否隐藏对应的activediv
    $(".sub").mouseenter(function(){
        entersub = true;
    }).mouseleave(function(){
        entersub = false;
    });
});

19年，重新开始写

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现无延迟级联菜单

1.一般的级联菜单，当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验：我们必须在这个li元素上平行的移动鼠标，才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下，将会显示其他的二级菜单了2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片3.实现代码://前端页面<!DOCTYPE html PUBLIC "-
复制链接

扫一扫

专栏目录