html怎么切换菜单,jQuery+CSS实现简单切换菜单示例

本文实例讲述了jQuery+CSS实现简单切换菜单的方法。分享给大家供大家参考，具体如下：

无标题页

$(function(){

toggleEvent(0);

var mTitle = $(".menuTitle");

mTitle.each(function(i){

$(this).click(function(){

toggleSlideEvent(i);

$(this).css("border-bottom","1px #ccccff solid");

});

});

});

function toggleSlideEvent(i)

{

$("ul",".menu1").css("display","none");

$("ul",".menu1").eq(i).slideDown();

$(".menuTitle").each(function(){

$(this).css("border-bottom","0px #ccccff solid");

});

}

function toggleEvent(i)

{

$("ul",".menu1").css("display","none");

$("ul",".menu1").eq(i).css("display","block");

$(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid");

}

.menu1

{

border: 1px #CCCCFF solid;

border-top: 0px;

width: 160px;

}

.menuTitle

{

width: 100%;

height: 26px;

border-bottom: 0px #CCCCFF solid;

border-top: 1px #CCCCFF solid;

text-align: left;

line-height: 26px;

cursor: pointer;

}

ul

{

border: 0px #CCCCFF solid;

width: 100%;

margin-left: 0px;

margin-top: 0px;

}

ul li

{

height: 36px;

line-height:36px;

border: 0px gray solid;

margin-top: 0px;

margin-left: 0px;

padding-left:20px;

list-style-type:none;

/*background:url(images/Title.png);*/

}

ul li:hover

{

height: 36px;

line-height:36px;

border: 0px gray solid;

margin-top: 0px;

margin-left: 0px;

padding-left:20px;

list-style-type:none;

/*background:url(images/Title.png);*/

cursor:pointer;

}

TITLE1

• Menu1
• Menu2
• Menu3
• Menu4
• Menu5

TITLE2

• Menu1
• Menu2
• Menu3
• Menu4
• Menu5

TITLE3

• Menu1
• Menu2
• Menu3
• Menu4
• Menu5

希望本文所述对大家jQuery程序设计有所帮助。