JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的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 实现导航栏下多级分类弹出效果的更多相关文章
- JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能
效果图: HTML结构如下: <div id="preview"> <div id="mediumDiv"> <img id=& ...
- css+html+js实现多级下拉和弹出菜单
本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...
- iOS 11 使用方法替换(Method Swizzling),去掉导航栏返回按钮的文字
方法一:设置BarButtonItem的文本样式为透明颜色,代码如下: [[UIBarButtonItem appearance] setTitleTextAttributes:@{NSForegro ...
- 原生JS面向对象方法实现万年历
###面向对象的方法实现万年历 实现思路: 1.创建构造函数constructor ``` function Calender(main){ this.current ...
- js判断类型为数字的方法实现总汇——原生js判断isNumber()
方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...
- JS对象转URL参数(原生JS和jQuery两种方式)
转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...
- js中for循环(原生js)
1,普通for循环,经常用的数组遍历 var arr = [1,2,3,4,5]; for ( var i = 0; i <arr.length; i++){ console.log(arr[i ...
随机推荐
- RTP/RTCP学习笔记 -- RFC 3550
The MTU of RTP package payload is (IP) - (UDP) - = 1472 #define DEFAULT_MAX_PACKET_SIZE 1200 video ...
- Linux随笔-鸟哥Linux服务器篇学习总结(全)
作者:Danbo 时间:2015-7-17 在runlevel3启动级别下默认启动网络挂载(autofs)机制,我们可以通过命令将其关闭:chkconfig autofs off 或者 /etc/in ...
- Code Review 规范
CodeReview规范 CodeReivew 标准 通用原则 提交 PR 的代码必须保证自测通过 只 review 代码规范.业务逻辑,不 review 架构设计(那是写代码前应该做的事情) 干掉重 ...
- 3种方式实现python多线程并发处理
标签: python奇淫技巧 最优线程数 Ncpu=CPU的数量 Ucpu=目标CPU使用率 W/C=等待时间与计算时间的比率 为保持处理器达到期望的使用率,最优的线程池的大小等于$$Nthreads ...
- [zjoi]青蛙的约会_扩展欧几里德
两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝着对方那里跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有问清楚 ...
- HTML中级教程 元标签
元标签对浏览器窗口中的内容不做任何事情,它们用在关于页面的像搜索引擎的归类目录信息中. 元标签meta可以使用尽可能多次如你所需,包括内容属性content(必须的).名称属性name和http-eq ...
- MySQL学习笔记(四)——分组数据group by子句和having子句
分组允许把数据分为多个逻辑组,以便对每个组进行聚集计算. 例如我们查下每个系里有多少名学生: 在使用group by 子句之前,还需要知道一些规定: 1. group by 子句可以包含任意数目的列, ...
- hdu Integer Inquiry 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1047 题目意思:就是求大整数加法.有多个案例,每个案例之间要输出一个空格. #include < ...
- Linux命令学习笔记- vmstat命令实战详解
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- Chapter3——进入Android Dalvik虚拟机(二)
Dalvik汇编语言基础 Dalvik虚拟机为自己设计了一套指令集,并制定了自己的指令格式和调用规范. 位描述约定如下: 每16位的字采用空格分隔开来 每个字母表示4位,每个字母按顺序从高字节开始,排 ...