JQuery (纵向横向菜单)小结转载

最新推荐文章于 2020-12-24 11:49:50 发布

s306587279

最新推荐文章于 2020-12-24 11:49:50 发布

阅读量104

点赞数

分类专栏： JQuery 文章标签： JQuery ViewUI

本文链接：https://blog.csdn.net/s306587279/article/details/84241921

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery(纵向横向菜单)小结

说明：此次小结是为了展示JQuery实现菜单的效果。

文件清单：

menu.jsp ----菜单JSP页面

jquery.js ----JQuery源文件JS

menu.js ----菜单使用的JS

style.css ----菜单样式文件

menu.jsp源文件，如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JQuery[菜单效果]</title>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

<br/>

<hr/>

<br/>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</body>

</html>

style.css样式源文件，如下：

/*菜单样式：2010-11-24*/

UL,LI{

/*去掉小圆点*/

list-style: none;

}

UL{

/*清除子菜单缩进*/

padding: 0;

/*但IE浏览器不能缩进*/

margin: 0;

}

/*主菜单样式*/

.mainMenu,.crossMenu{

/*字体大小*/

font-size: 12px;

/*添加背景图片*/

/*背景图横向重复*/

background-repeat: repeat-x;

/*主菜单宽度*/

width: 70px;

}

/*子菜单样式*/

LI{

/*背景色*/

background-color: #EEEEEE;

}

/*取消链接的下划线*/

text-decoration: none;

/*子菜单缩进*/

padding-left: 15px;

/*让连接充满区域，及菜单边缘也可以点击

* 问题：如果值为block,IE会出现问题，

* 不能填充，且子菜单会变样，因此我们

* 用 inline解决，但是不能解决填充，

* 因此加上宽度(70 - 15)

display: block;

display: inline;

width: 70px;

/*在所有的链接加3个像素的上边距和下边距*/

padding-top: 3px;

padding-bottom: 3px;

}

.mainMenu A,.crossMenu A{

/*主菜单链接为白色*/

color: white;

/*链接背景图片*/

/*背景图不重复*/

background-repeat: no-repeat;

/*背景箭头的位置*/

background-position: 2px center;

}

.mainMenu LI A,.crossMenu LI A{

/*子菜单链接文字为黑色*/

color: black;

/*去掉子菜单背景箭头*/

}

/*主菜单下的UL全部隐藏*/

.mainMenu UL,.crossMenu UL{

display: none;

}

/*横向菜单*/

.crossMenu{

/*横向排列*/

float: left;

/*字体大小*/

font-size: 12px;

}

menu.js源文件，如下：

function()

{

/**

* 如果使用.mainMenu a选择器，会

* 出现点击子菜单也会触发click事件

* 解决方法：使用JQuery的特有方式

* .mainMenu > a

* */

$('.mainMenu > a').click(

function()

{

//找到主菜单项的子菜单项

var childMenu = $(this).next('ul');

/*常规方法*/

if('none' == childMenu.css('display'))

{

childMenu.css('display','block');

}

else

{

childMenu.css('display','none');

}

/*使用JQuery的方法

* 数值为毫秒

* 文字：slow/normal,fast*/

//childMenu.show(100);

//childMenu.show('normal');

//childMenu.hide(100);

//省去if else 判断

//childMenu.toggle('normal');

//卷帘效果，也支持参数

//childMenu.slideDown();

//childMenu.slideUp();

//省去if else 判断

childMenu.slideToggle();

changeIcon($(this));

}

);

//处理横向菜单

$('.crossMenu > a').hover(

function()

{

$(this).next('ul').slideDown();

function()

{//但是鼠标移到子菜单，会有bug,子菜单消失

//$(this).next('ul').slideUp();

//首先得到子菜单

var childMenu = $(this).next('ul');

//解决方法，延时处理(300ms)

var timeOutID = setTimeout(

function()

{

$(this).next('ul').slideUp();

},300

);

childMenu.hover(

function()

{

//删除父菜单的延时

clearTimeout(timeOutID);

function()

{//但此时还是有问题，走了很多弯路

$(this).slideUp();

}

);

}

);

$('.crossMenu').hover(

//自己判断

// function()

// {

// $(this).children('ul').slideDown();

// },

// function()

// {

// $(this).children('ul').slideUp();

// }

//卷帘效果

function()

{

$(this).children('ul').slideToggle();

changeIcon($(this).children('a'));

}

);

}

);

/*修改主菜单的指示图标*/

function changeIcon(mainNode)

{

if(mainNode)

{

if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0)

{

mainNode.css('background-image', 'url(resources/images/expanded.gif)');

}

else

{

mainNode.css('background-image', 'url(resources/images/collapsed.gif)');

}

小结：

A部分

① 页面中的菜单可以通过嵌套ul和li来表示；

② 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构件多层的菜单；

③ 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进.Opera浏览器比较特殊，li的标志符号和其他浏览器不同；

④ list-style属性值为none时，可以清除ul和li前的小圆点

⑤ 清除子菜单的缩进值，需要padding和margin都为0，其中IE只有margin也为0时才可以清除缩进值；

⑥ 可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域；

⑦ 可以使用background-repeat来控制背景图的重复填充方式；

⑧ 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的；

⑨ text-decoration属性值为none时，可以取消链接A文字下方的下划线；

⑩ background-position可以控制背景图的位置，属性值既可以用数值，也可以使用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向；

B部分

① background-image的值为none表示没有背景图；

② background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示；

③ display的值为none可以用来隐藏元素；

④ .mainMenu a 和 .mainMenu > a 的不同之处，前者选择使用了.mainMenu的这个class的元素内部所有的a节点，后者只选择.mainMenu的子节点中的a节点；

⑤ show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。

⑥ toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同；

⑦ slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide()不同；

⑧ slideToggle和toggle达到类似的效果；

⑨ DOCTYPE对于JQuery的动画效果是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果；

⑩ Float的值为left，可以使原本各自位于一行的元素全部在一行中向左浮动；

C部分

① 可以给多个选择器定义同样的样式，选择器之间用，分割。同样对于JQuery的$（）方法，也可以传入多个选择器。

s306587279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery (纵向横向菜单)小结转载

JQuery(纵向横向菜单)小结说明：此次小结是为了展示JQuery实现菜单的效果。文件清单： menu.jsp ----菜单JSP页面 jquery.js ----JQuery源文件JS menu.js ----菜单使用的JS style.css ----菜单样式文件menu.jsp源文件，如下：&lt;%@ page language="j...
复制链接

扫一扫