jquery는 반복 로딩 구현을 방지하기 위해 li를 클릭합니다.

콘텐츠 로드가 느리기 때문에 사용자가 실수로 li를 두 번 클릭할 수 있으며, 이로 인해 두 개의 요청이 발생하는 것은 우리가 보고 싶지 않은 것입니다.
오늘 javascript-jquery 그룹에서 두 개의 데모를 보냈습니다. 그의 방법은 클릭한 li 노드를 먼저 복사한 다음
로드한 후 다시 삽입하는 것이었습니다. 이는 분명히 적합하지 않습니다. 기능.
고민하다가 li를 클릭했을 때(ajax가 로드되기 전) 로딩 이미지를 추가하고, li 노드에 img 요소가 존재하는지 확인하면 어떨까 하는 생각이 들었습니다.
없으면 로드하세요. 그렇지 않으면 처리되지 않습니다.
테스트를 통과했습니다(^o^)/.

코드 복사 코드는 다음과 같습니다.

<script> <br>$(function(){ <br>setHeight("#siderbar",130); // 设置侧边栏的高度 <br>$(window).resize(function(){setHeight("#siderbar",130)}); //窗口变化时重新设置侧边栏高度 <br>$.get("sider.html",function(data){ <br>$('#siderbar_box').append(data); <br>}); <br>/*设置ID的高度*/ <br>function setHeight(id,h){ <br>var windowHeight=$(window).height(); <br>$(id).css({"height":(windowHeight-h)+"px"}); <br>} <br>// 绑定加载后的li的查看 <br>$("#siderbar_box ul li a").live("click",function(){ <br>var $current=$(this); <br>var $currentli=$(this).parent(); <br>if($currentli.children("ul").attr("id")==undefined) //第一次需ajax加载 <br>{ <br>$currentli.siblings().children("ul").slideUp('fast'); <br>$currentli.siblings().children("a").removeClass("focus"); <br>$.get("chapter.html",function(data){ <br>$current.addClass("focus").parent().append(data); <br>showChapter(); //在content去显示主要内容 <br>}); <br><br>}else{ <br>$currentli.siblings().children("ul").slideUp('fast'); <br>$currentli.siblings().children("a").removeClass("focus"); <br>if($currentli.children("ul").is(":visible")) //处于展开状态 <br>{ <br><br>$current.removeClass("focus").parent().children("ul").slideUp('fast'); <br>}else{ <br><br>$current.addClass("focus").parent().children("ul").slideDown('slow'); <br>showChapter(); <br>} <br>} <br>}); <br>//content显示列表标题 <br>function showChapter(){ <br>$.get("chapter.html",function(data){ <br>$("#content").html(data); <br>$("#content ul li").live("click",function(){ //绑定加载后的标题单击事件 <br>$current=$(this); <br>if($current.children("table").attr("id")==undefined) //单击标题，第一次ajax加载 <br>{ <br>if($current.children("span").find("img").size()<1) //只加载一次内容，防止多次请求加载 <BR>{ <BR>$current.children("span").append("<img src='loading.gif' border='none'/>"); //加载图片 <br>$.get("table.html",function(data){ <br>$current.append(data).children("span").addClass("highlight").find("img").remove(); //加载完成移除加载图片 <br>}); <br>} <br>}else{ <br><br>if($current.children("table").is(":visible")) <br>{ <br>$current.children("span").removeClass("highlight").next("table").hide(); <br><br>}else{ <br><br>$current.children("span").addClass("highlight").next("table").show(); <br>} <br>} <br><br>}); <br>}); <br>} <br>}); <br></script>

DEMO©copyright by Tomi-Eric's

课程

데모 주소
http://demo.jb51.net/js /jquery_li_click/demo.html패키지 다운로드
http://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar