首页 > 代码库 > JS学习笔记（一）： 使用原生JS 实现导航栏下多级分类弹出效果

JS学习笔记（一）： 使用原生JS 实现导航栏下多级分类弹出效果

2024-09-14 23:18:11   237人阅读

　　　　在给静态页面静添加交互效果时遇到的问题 ：

鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 

情景如下：

技术分享

 

解决思路： 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类　　　

代码如下：

　　　　　　　　　　CSS部分: 在原来的目标：hover样式中 增加 .hover状态

li.app_jd a:hover,li.app_jd a.hover{
    background-position: -126px -397px;
}
li.service>a:hover,li.service>a.hover {
    background-image:url(images/jt_up.jpg);
    background-color:#fff;
    border:1px solid #DDD;
    border-bottom-width:0px;
    position:relative;
    z-index:40;
} 
li.app_jd a:hover,li.app_jd a.hover{
    background-position: -126px -397px;
}

　　　　　　　　　　JS部分:在原来的触发事件上 新增了 二级菜单触发onmouseover/out时 设置各自的一级菜单的className 为 “hover”;

window.onload = function(){
    //顶部导航栏弹出
    $("#top_box .app_jd")[0].onmouseover=$("#top_box .service")[0].onmouseover=showItem;
    $("#top_box .app_jd")[0].onmouseout=$("#top_box .service")[0].onmouseout=hideItem;
    //商品主分类栏弹出
    $("#category")[0].onmouseover=showCate;
    $("#category")[0].onmouseout=hideCate;;
    //商品一级分类弹出二级分类
    var lis = $("#cate_box>li");
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=showSubCate;
        lis[i].onmouseout=hideSubCate;
    }
}
function showItem(){
    this.$("[id$=‘_items‘]")[0].style.display="block";
    this.$("a")[0].className="hover";
}
function hideItem(){
    this.$("[id$=‘_items‘]")[0].style.display="none";
    this.$("a")[0].className="";
}
function showCate(){
    this.$("#cate_box")[0].style.display="block";
}
function hideCate(){
    this.$("#cate_box")[0].style.display="none";
}
function showSubCate(){
    this.$(".sub_cate_box")[0].style.display="block";
    this.$("h3")[0].className="hover";
}
function hideSubCate(){
    this.$(".sub_cate_box")[0].style.display="none";
    this.$("h3")[0].className="";
}

学习心得：

　　*越是熟悉 HTML/CSS的数据结构，就越可以在JS部分用更“优雅的”代码来执行更多的事情。

　　

 

　　　 

 

JS学习笔记（一）： 使用原生JS 实现导航栏下多级分类弹出效果


联系
我们