在CSS样式表中，设置.accordion p 为 display:none。现在，如果你像默认打开的样式一样，打开第三个面板，你可以写$(".accordion2 p").eq(2).show(); (eq = equal)来实现它，需要注意的是起始点是"0"，而不是"1"，所以，第三个相应的是"2"，而不是"3"。

$(document).ready(function(){ $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });

5a. 鼠标经过激活效果 #1

这个将会实现一个非常漂亮的，当鼠标经过时出现渐变出现的效果 (view demo)

当鼠标经过菜单时，它会寻找紧接着的<em>，并在上方激活它的不透明度。

$(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); 

5b. 鼠标经过激活 #2

这个实例会显示菜单中链接的title 属性attribute，让其以变数方式存在，并添加<em>标签 (view demo)

第一行会添加一个空的<em>到菜单的<a>元素。

当鼠标经过菜单链接时，它会显示title的属性，让它以"hoverText（隐藏）"的形式显示，并使<em>中的文字显示隐藏文本的值。

$(document).ready(function(){ $(".menu2 a").append("<em></em>"); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });