利用二级菜单的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:;
}
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="";
}

TIPS:

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

  

   

JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果的更多相关文章

  1. JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  2. 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  3. JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能

     效果图: HTML结构如下: <div id="preview"> <div id="mediumDiv"> <img id=& ...

  4. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  5. iOS 11 使用方法替换(Method Swizzling),去掉导航栏返回按钮的文字

    方法一:设置BarButtonItem的文本样式为透明颜色,代码如下: [[UIBarButtonItem appearance] setTitleTextAttributes:@{NSForegro ...

  6. 原生JS面向对象方法实现万年历

    ###面向对象的方法实现万年历 实现思路:    1.创建构造函数constructor    ```    function Calender(main){         this.current ...

  7. js判断类型为数字的方法实现总汇——原生js判断isNumber()

    方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...

  8. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  9. js中for循环(原生js)

    1,普通for循环,经常用的数组遍历 var arr = [1,2,3,4,5]; for ( var i = 0; i <arr.length; i++){ console.log(arr[i ...

随机推荐

  1. P1604&P1601

    [usaco2010]冲浪_slide 受到秘鲁的马丘比丘的新式水上乐园的启发,Farmer John决定也为奶牛们建一个水上乐园.当然,它最大的亮点就是新奇巨大的水上冲浪. 超级轨道包含 E (1 ...

  2. struts2 session登录

    session:记录于服务器端的信息,当客户端传来信息时候,判断是不是指定的信息. 常见应用:判断用户是否登录. struts具体的实现不写了,写主要的. 在action的方法中加入: ActionC ...

  3. Normalize.css 与传统的 CSS Reset 有哪些区别?

    CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ...

  4. UVA-11892(组合游戏)

    题意: 给n堆石子,每堆有ai个,每次可以取每堆中任意数目的石子;但是上一次操作的人没有将一堆全部取走,那么下一个人还要在那一堆取; 思路: 每次取到这堆就剩一个的策略; AC代码: #include ...

  5. nginx开发_字符串操作函数

    由于ngx_str_t为非NULL结尾的函数,且网络请求中有大量忽略大小写的需求,所以nginx内部封装了许多字符串操作相关的函数,函数名称极其相识,且使用时有有些约定,特此整理. 赋值&拷贝 ...

  6. [ZJOI 2007] 捉迷藏

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1095 [算法] 首先建出点分树,然后每一个点开两个堆.“第一个堆记录子树中所有节点到 ...

  7. [SPOJ1557] Can you answer these queries II

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2482 [算法] 线段树维护历史最值 时间复杂度 : O(NlogN) [代码] #i ...

  8. 洛谷 P4660 & bzoj 1168 [ Baltic OI 2008 ] 手套 —— 分析+单调栈

    题目:https://www.luogu.org/record/show?rid=12702916 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...

  9. 配置tomcat https的步骤

    keytool -genkey -v -alias tomcat -keyalg RSA -keystore D:\tomcat.keystore -validity 36500 keytool -g ...

  10. redis实例

    <?php Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 本篇文章,主要介绍利用PHP使用Redis ...