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 ...
随机推荐
- P1604&P1601
[usaco2010]冲浪_slide 受到秘鲁的马丘比丘的新式水上乐园的启发,Farmer John决定也为奶牛们建一个水上乐园.当然,它最大的亮点就是新奇巨大的水上冲浪. 超级轨道包含 E (1 ...
- struts2 session登录
session:记录于服务器端的信息,当客户端传来信息时候,判断是不是指定的信息. 常见应用:判断用户是否登录. struts具体的实现不写了,写主要的. 在action的方法中加入: ActionC ...
- Normalize.css 与传统的 CSS Reset 有哪些区别?
CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ...
- UVA-11892(组合游戏)
题意: 给n堆石子,每堆有ai个,每次可以取每堆中任意数目的石子;但是上一次操作的人没有将一堆全部取走,那么下一个人还要在那一堆取; 思路: 每次取到这堆就剩一个的策略; AC代码: #include ...
- nginx开发_字符串操作函数
由于ngx_str_t为非NULL结尾的函数,且网络请求中有大量忽略大小写的需求,所以nginx内部封装了许多字符串操作相关的函数,函数名称极其相识,且使用时有有些约定,特此整理. 赋值&拷贝 ...
- [ZJOI 2007] 捉迷藏
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1095 [算法] 首先建出点分树,然后每一个点开两个堆.“第一个堆记录子树中所有节点到 ...
- [SPOJ1557] Can you answer these queries II
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2482 [算法] 线段树维护历史最值 时间复杂度 : O(NlogN) [代码] #i ...
- 洛谷 P4660 & bzoj 1168 [ Baltic OI 2008 ] 手套 —— 分析+单调栈
题目:https://www.luogu.org/record/show?rid=12702916 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...
- 配置tomcat https的步骤
keytool -genkey -v -alias tomcat -keyalg RSA -keystore D:\tomcat.keystore -validity 36500 keytool -g ...
- redis实例
<?php Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 本篇文章,主要介绍利用PHP使用Redis ...