아래 코드.여러분 은 연구 해 보 세 요.jquery 의 학습 에 매우 좋 습 니 다.날 카 로 운 jquery 의 한 마디 코드 입 니 다.이 루어 진 메뉴 가 실 행 된 후(호출 된 외지 jquery 이기 때문에)
1-5-1 /dom 요소 가 불 러 오 기 를 기다 리 고 있 습 니 다.$(function(){$(".haschildren").click(function(){$(this).addClass("highlight").children("a").show().end() .siblings().children("a").hide().removeClass("highlight") })}); [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다. ]운 행 된 후,새로 고침 이 필요 합 니 다(호출 된 외지 jquery 이기 때문에)<script type="text/javascript"src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"/> <style type="text/css"> li{ text-indent: 10px; margin-left: -20px; padding-top: 0px; list-style: none; } .oline{ background-image: url(treeview-default-line.gif); background-position: 7px 18px; background-repeat: no-repeat; } .lline{ background-image: url(L.gif); background-position: 7px 18px; background-repeat: no-repeat; } .expand{ background-image: url(minus.gif); background-repeat: no-repeat; background-position: left; } .colpse{ background-image: url(plus.gif); background-repeat: no-repeat; background-position: left; } label{ padding-left: 15px; padding-top: -5px; } .leaf{ background-image: url(L.gif); background-repeat: no-repeat; background-position: left; } input{ border: 1px solid #CCC; } </style> <ol> <li> <label>A</label> <ol> <li> <label>A-1</label> <ol> <li> <label>A-1-1</label> <ol> <li> <label>A-1-1-1</label> <ol> <li> <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li> <label>A-1-1</label> <ol> <li> <label>A-1-1-1</label> <ol> <li> <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li> <label>A-1-1</label> <ol> <li> <label>A-1-1-1</label> <ol> <li> <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> <li> <label>B-1</label> <ol> <li> <label>B-1-1</label> <ol> <li> <label>B-1-1-1</label> <ol> <li> <label>B-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> <script type="text/javascript"> $("li:has(ol)>label").addClass('colpse'); $('ol>li:not(:only-child)').addClass('oline'); $('ol>li:only-child').addClass('lline'); $('ol>li:last-child').addClass('lline'); $("li:has(ol)>label").toggle( function(){ $(this).removeClass(); $(this).addClass('colpse'); $("+ol",this).children().slideUp(100); }, function(){ $(this).removeClass(); $(this).addClass('expand'); $("+ol",this).children().slideDown(100); } ); $("li:has(ol)>label").click(); $("label:not(:has(ol))").dblclick(function(){ $(this).hide(); $(this).before('<input type="text" value="'+$(this).html()+'"/><input type="button" value="add"/>'); $(":button").click(function(){ $(this).prev().hide(); $(this).hide(); $(this).next().html($(this).prev().val()); $(this).next().show(); }); }); </script>[Ctrl+A 선택:<a href="https://www.jb51.net/article/23421.htm" title="查看具体详情" rel="noreferrer noopener nofollow">引入外部Js需再刷新一下页面才能执行</a>]
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예
이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다.
before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다.
after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
