此作品是一款非常实用的导航菜单特效，简洁大气，是从事政府资助工作的网友杰立浏览网站的时候觉得好看就整理分享出来了，实现了树型可收缩jquery导航菜单。。。
核心jquery代码如下：
function navList(id) {
var $obj = $("#J_navlist"), $item = $("#J_nav_" + id);
$item.addClass("on").parent().removeClass("none").parent().addClass("selected");
$obj.find("h4").hover(function () {
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
$obj.find("p").hover(function () {
if ($(this).hasClass("on")) { return; }
$(this).addClass("hover");
}, function () {
if ($(this).hasClass("on")) { return; }
$(this).removeClass("hover");
});
$obj.find("h4").click(function () {
var $div = $(this).siblings(".list-item");
if ($(this).parent().hasClass("selected")) {
$div.slideUp(600);
$(this).parent().removeClass("selected");
}
if ($div.is(":hidden")) {
$("#J_navlist li").find(".list-item").slideUp(600);
$("#J_navlist li").removeClass("selected");
$(this).parent().addClass("selected");
$div.slideDown(600);
} else {
$div.slideUp(600);
}
});
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友杰立 导航菜单 二级菜单 弹出层 选项卡 三级联动 天猫左侧分类导航 树形菜单 dtree ECOTree 滑动插件 手风琴效果