본문 바로가기
조회 수 65 추천 수 0 댓글 8
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
Extra Form

대략 어떤걸 숨겨야 할지는 알겠는데 문제는 공지 접기 버튼을 누르면 공지 펼치기로 바뀌는 부분과 새로고침을 해도 공지 접기나 펼치기 상태가 게시판 한정으로 반영이 되어야함. 이걸 보르겠음.

Who's 뉴리대장

profile

아이마스 좋아하는 코더.

목록
  • profile
    작성자 뉴리대장Best 2022.07.13 15:40

    감사합니다. 제이쿼리 없는 바닐라 js네요. 해당 코드 참조해서 구현해 보도록 하겠습니다.

  • ?
    갓수가되고싶따Best 2022.07.13 15:24
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>제목</title>
    </head>
    </body>
    <style>
    #toc-content {
    display: none;
    }
    #toc-toggle {
    cursor: pointer;
    color: #2962ff;
    }
    #toc-toggle:hover {
    text-decoration: underline;
    }
    </style>

    목차 [<span id="toc-toggle" onclick="openCloseToc()">보이기</span>]
    <ol id="toc-content">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ol>

    <script>
    var view_key=localStorage.getItem('view_key');
    console.log(view_key);
    if(view_key=="true"){
    document.getElementById('toc-content').style.display = 'none';
    document.getElementById('toc-toggle').textContent = '보이기';
    }else if(view_key=="false"){
    document.getElementById('toc-content').style.display = 'block';
    document.getElementById('toc-toggle').textContent = '숨기기';
    }
    function openCloseToc() {
    if(document.getElementById('toc-content').style.display === 'block') {
    document.getElementById('toc-content').style.display = 'none';
    document.getElementById('toc-toggle').textContent = '보이기';
    localStorage.setItem('view_key',true);
    } else {
    document.getElementById('toc-content').style.display = 'block';
    document.getElementById('toc-toggle').textContent = '숨기기';
    localStorage.setItem('view_key',false);
    }
    }
    </script>
    </body>
    </html>

    일단 만들어봣는데 위 소스 그대로 html 파일로 만들어서 테스트 해보시면 될듯
    생각하시는게 다를거 같아서 틀릴수도있을거같은데 개인적으로는 공부가 되서 잘 써먹을듯요
  • ?
    갓수가되고싶따 2022.07.13 14:50

    https://joshua-dev-story.blogspot.com/2020/09/javascript-collapse.html

    이 블로그 참고해보시는건 어떨지?

    고정은 css style 쪽에서 고정시키거나 따로 값을 가지고 있게해서 적용해야할거같은데 그건 좀더 찾아봐야할듯요

  • ?
    갓수가되고싶따 2022.07.13 15:10
    css 고정은 localstorage 라는게 잇어서 찾아보고있는데 얼추 정리되면 예시코드 한번 드릴수있을듯요
  • profile
    작성자 뉴리대장 2022.07.13 15:14
    일단 공지글 자체는 tr.notice만 날리면 됨. 그 날리는 버튼을 어떻게 만드는지가 문제임.
  • ?
    갓수가되고싶따 2022.07.13 15:24
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>제목</title>
    </head>
    </body>
    <style>
    #toc-content {
    display: none;
    }
    #toc-toggle {
    cursor: pointer;
    color: #2962ff;
    }
    #toc-toggle:hover {
    text-decoration: underline;
    }
    </style>

    목차 [<span id="toc-toggle" onclick="openCloseToc()">보이기</span>]
    <ol id="toc-content">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ol>

    <script>
    var view_key=localStorage.getItem('view_key');
    console.log(view_key);
    if(view_key=="true"){
    document.getElementById('toc-content').style.display = 'none';
    document.getElementById('toc-toggle').textContent = '보이기';
    }else if(view_key=="false"){
    document.getElementById('toc-content').style.display = 'block';
    document.getElementById('toc-toggle').textContent = '숨기기';
    }
    function openCloseToc() {
    if(document.getElementById('toc-content').style.display === 'block') {
    document.getElementById('toc-content').style.display = 'none';
    document.getElementById('toc-toggle').textContent = '보이기';
    localStorage.setItem('view_key',true);
    } else {
    document.getElementById('toc-content').style.display = 'block';
    document.getElementById('toc-toggle').textContent = '숨기기';
    localStorage.setItem('view_key',false);
    }
    }
    </script>
    </body>
    </html>

    일단 만들어봣는데 위 소스 그대로 html 파일로 만들어서 테스트 해보시면 될듯
    생각하시는게 다를거 같아서 틀릴수도있을거같은데 개인적으로는 공부가 되서 잘 써먹을듯요
  • ?
    갓수가되고싶따 2022.07.13 15:29
    html 코드 이대로 올려도 괜찮은지는 모르겟는데 문제가 된다면 얘기해주시면 바로 삭제하겟습니다~
  • profile
    작성자 뉴리대장 2022.07.13 15:40

    감사합니다. 제이쿼리 없는 바닐라 js네요. 해당 코드 참조해서 구현해 보도록 하겠습니다.

  • ?
    갓수가되고싶따 2022.07.13 15:42
    화이팅입니다 ^^
  • profile
    일립시S 2022.07.13 18:21

    이거 내가 파일 목록 접기 스크립트 만들어놓은 거 쿠키랑 섞어 쓰면 될 텐데


유머/자유 게시판

유머를 포함하여 국내 정치 이외의 이야기를 자유롭게 할 수 있는 게시판 입니다

List of Articles
번호 분류 제목 글쓴이 날짜 추천 수 조회 수
공지 우리 사이트는 스퀘어발 난민을 환영합니다 뉴리대장 2023.12.18 5 910
공지 사이트 이용 규칙(2024.02.23. 수정) 17 뉴리대장 2022.06.29 33 3394
공지 공지 수위가 있는 게시물에 대해 3 뉴리대장 2022.07.04 12 1524
공지 공지 유머/자유 게시판 이용 안내 및 규칙 7 뉴리대장 2022.06.29 19 1811
공지 숨기기
8337 잡담 말딸) 솔직히 머꼴인 캐릭터 2 file 준준이 2022.07.01 0 408
8336 잡담 엘든링) 프롬뇌 굴리는데 미켈라 계속 수상하네 12 file I.C.Q 2022.07.12 0 407
8335 창작(자작) 자작 홀로라이브 한글화 로고 9 file 야마테쿄코 2022.06.30 25 406
8334 애니/서브컬쳐 [말딸] 죽은 눈 다스카 1 file 김흑백 2022.07.08 1 405
8333 잡담 이건 빠르게 수정해야할거 같음. 5 file nana111 2022.06.30 10 405
8332 유머 누리웹에서 왔으면 뭐 어쩔껀데 12 노말맨 2022.06.30 11 405
8331 애니/서브컬쳐 약혐)10월에 발매 예정인 메이드인어비스 피규어 4 file 뉴뉴 2022.07.04 1 404
8330 유머 ⚠️ 새벽이니 달린다!!! 5 file '마우스'패드 2022.06.30 5 404
8329 잡담 님들. 픽시브에서 좋아하는 케릭터 야짤 쉽게 모으는 법 알려드림? 1 하미래 2022.07.24 1 403
8328 애니/서브컬쳐 말딸) 스페셜 위크, 첫눈에 반하다.manga 1 file 마음의거울 2022.07.18 2 402
8327 잡담 황달이 황달당한 거 보니까 트래픽이 유의미하게 감소했나봄 ㅋㅋ 10 유스티니아누스1세 2022.06.30 6 400
8326 유머 커뮤니티가 망하는 과정은 항상 한결 같음. 7 file 돌고래뷰지 2022.07.03 8 399
8325 잡담 사실 초기에는 누리웹이랑 여기랑 합치는게 좋을거 같다는 생각도 했는데 7 GN-0000+GNR-010 2022.06.30 0 399
8324 애니/서브컬쳐 니케)가 김형태라 못믿는다거나 천박하다는 거에 대한 반박 2 file 루리웹-2809288201 2022.08.03 1 398
8323 창작(자작) 기동승마 우마무스메 메지로 메모리 1 file 잉여소녀 2022.06.30 5 398
8322 잡담 대피소 둘다 하는 입장에서 본 뉴리넷 4 file 사쿠라미코 2022.07.03 10 397
8321 유머 현실적인 판타지 지도를 만드는 방법.jpg 3 file 바티칸시국 2023.06.21 3 396
8320 유머 후방주의)❤🧡💛💚💙💜능욕당하는 엘프❤🧡💛💚💙💜 4 file Deliciousmango 2022.07.04 4 396
8319 애니/서브컬쳐 [말딸] 가스라이팅에서 빠져나온 박신 1 file 김흑백 2022.06.30 4 396
8318 애니/서브컬쳐 약 후방 16 - 자꾸 사람들이 변태로 오인한다. 8 file 짤꾼 2022.07.05 10 394
목록
Board Pagination Prev 1 ... 7 8 9 10 11 12 13 14 15 16 ... 428 Next
/ 428