JavaScript 접기기능 html

2019.01.28 19:27

졸리운_곰 조회 수:598

접기기능 html

http://rurouni628.egloos.com/2334430

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com




http://ldas.egloos.com/4839184#none (엘다스님 블로그 참조)


접기 기능을 찾다가 발견했는데
접고 펼치는 html이 여러가지가 있는듯 하다.

윗님 블로그에서는 4가지 방법이 소개되어있는데



1번 : 깔끔하지만 에디터 입력란으로 되돌아오면 깨지는 경우가 있다고 합니다.

<a href=#none onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';> 
제목(이걸 누르면 열기,닫기가 됩니다.) 
</a><DIV style='display:none'> 
내용 
</div>




제목(이걸 누르면 열기,닫기가 됩니다.) 




2번 : 1번과 양식은 같지만 에디터 입력란으로 되돌아와도 안 깨진다는군요.

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)"> 
제목(이걸 누르면 열기,닫기가 됩니다.)
</a><div style="DISPLAY: none">
내용
</div>



제목(이걸 누르면 열기,닫기가 됩니다.)




3번 : 2번과 똑같지만 마지막에 편하게 접기위한 양식입니다.

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)">
열기
</a><div style="DISPLAY: none">
내용 
<a onclick="this.parentNode.style.display='none';" href="javascript:void(0)">
접기
</a></div>  



열기





4번 : 3번과 같지만 3번이 가끔 오류가 날때가 있다고 하네요.

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)">
열기
</a><div style="DISPLAY: none"><br/><br/>
내용
<br/><br/><a onclick="this.parentNode.style.display='none';" href="javascript:void(0)">
접기
</a></div><br/><br/>



열기


 
[출처] http://egloos.zum.com/rurouni628/v/2334430
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
13 [웹 어셈블리, WSAM] Persisting data with Emscripten : Emscripten으로 데이터 유지하기 졸리운_곰 2024.04.20 381
12 [웹 어셈블리, WSAM] Porting a Linux Program to Run in Browser using Emscripten : mscripten을 사용하여 브라우저에서 실행되도록 Linux 프로그램 포팅 졸리운_곰 2024.04.20 392
11 [웹 어셈블리, WSAM] An example of emscripten with WebSocket. file 졸리운_곰 2023.12.12 462
10 [웹 어셈블리, WSAM] サーバサイドはWebAssemblyの夢を見るか? – Node.jsでwasmってみた : 서버 측은 WebAssembly의 꿈을 꾸는가? – Node.js에서 wasm 해 보았습니다. file 졸리운_곰 2023.08.27 367
9 [웹 어셈블리 WSAM, webassembly] WebAssembly on the server-side : 서버측 웹어셈블리 file 졸리운_곰 2023.08.27 504
8 [Blazor][WASM] Awesome Blazor file 졸리운_곰 2021.08.15 20070
7 [Blazor][C# .net] Blazor와 C#으로 풀스택 웹 개발하기 file 졸리운_곰 2021.08.15 444
6 [WASM][web assembly] 웹 어셈블리를 보다 쉽게 웹 어플리케이션에 적용하는 방법 file 졸리운_곰 2021.07.19 428
5 Using Blazor, Tensorflow and ML.NET to Identify Images file 졸리운_곰 2021.07.03 529
4 [WASM][WebAssembly] The Top 81 Emscripten Open Source Projects 졸리운_곰 2021.04.19 518
3 [WebAssembly][WSAM] Blazor와 WebAssembly 소개 file 졸리운_곰 2021.03.28 516
2 Webassembly Tutorial using Emscripten file 졸리운_곰 2020.10.24 646
1 [웹어셈블리] Visual Studio 2019와 Emscripten (emcc) 개발 file 졸리운_곰 2020.10.18 2094
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED