var $current=$(this);
var $currentli=$(this).parent();
if($currentli.children(“ul”).attr(“id”)==undefined) //第一次需ajax加载
{
$currentli.siblings().children(“ul”).slideUp(‘fast’);
$currentli.siblings().children(“a”).removeClass(“focus”);
$.get(“chapter.html”,function(data){
$current.addClass(“focus”).parent().append(data);
showChapter(); //在content去显示主要内容
});
}else{
$currentli.siblings().children(“ul”).slideUp(‘fast’);
$currentli.siblings().children(“a”).removeClass(“focus”);
if($currentli.children(“ul”).is(“:visible”)) //处于展开状态
{
$current.removeClass(“focus”).parent().children(“ul”).slideUp(‘fast’);
}else{
$current.addClass(“focus”).parent().children(“ul”).slideDown(‘slow’);
showChapter();
}
}
});
//content显示列表标题
function showChapter(){
$.get(“chapter.html”,function(data){
$(“#content”).html(data);
$(“#content ul li”).live(“click”,function(){ //绑定加载后的标题单击事件
$current=$(this);
if($current.children(“table”).attr(“id”)==undefined) //单击标题，第一次ajax加载
{
if($current.children(“span”).find(“img”).size()<1) //只加载一次内容，防止多次请求加载
{
$current.children(“span”).append(“<img src=’loading.gif’ border=’none’/>”); //加载图片
$.get(“table.html”,function(data){
$current.append(data).children(“span”).addClass(“highlight”).find(“img”).remove(); //加载完成移除加载图片
});
}
}else{
if($current.children(“table”).is(“:visible”))
{
$current.children(“span”).removeClass(“highlight”).next(“table”).hide();
}else{
$current.children(“span”).addClass(“highlight”).next(“table”).show();
}
}
});
});
}
});
</script>
</head>
<body>
<div id=”container”>
<div id=”header”><h1>DEMO<span>©copyright by <a href=”http://cnblogs.com/tomieric”>Tomi-Eric’s</a><span></h1></div>
<div id=”siderbar”>
<h4>课程</h4>
<div id=”siderbar_box”>
</div>
</div>
<div id=”content”>
<div id=”content_footer”></div>
</div>
</div>
</body>
</html>
演示地址 http://demo.jb51.net/js/jquery_li_click/demo.html
打包下载 http://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar
