본문 바로가기
조회 수 76 추천 수 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
번호 분류 제목 글쓴이 날짜 추천 수 조회 수
공지 사이트 이용 규칙(2024.02.23. 수정) 17 뉴리대장 2022.06.29 34 3810
공지 공지 수위가 있는 게시물에 대해 3 뉴리대장 2022.07.04 12 2147
공지 공지 유머/자유 게시판 이용 안내 및 규칙 7 뉴리대장 2022.06.29 19 2168
공지 숨기기
4739 잡담 올림픽 위원회가 한국을 북한이라고 소개한 이유 2 정달호 2024.07.28 2 20
4738 잡담 내일 트친 아무개랑 홍대에서 놀기로 했다. 2 트라린 2024.07.28 1 20
4737 잡담 맥쿼리인프라도 떡락했네 3 file 뉴리대장 2024.08.05 1 20
4736 잡담 '퍼컬레이터'라고, 들어봤어? 2 file 트라린 2024.08.11 2 20
4735 잡담 어디론가 가고 싶지만 crys 2022.07.12 0 21
4734 잡담 [충격]'리그 4위' 두산 최악 마주하나...오재원 논란, 현역 선수 '추가 적발' 의심 머레보 2024.05.25 0 21
4733 잡담 오늘 서울 여러 곳을 돌아다니며 산 음반들 3 file 트라린 2024.07.13 2 21
4732 잡담 버튜버) ゲシュタルト - 카후花譜KAF file 정달호 2024.07.14 1 21
4731 잡담 장마철이라 그런지 사건사고가 끊이질 않네 3 사쿠라미코 2024.07.14 1 21
4730 잡담 진짜 보기 어려운 사진 2 file 수상한변태 2024.07.18 1 21
4729 잡담 운동해야지 3 배고픈강아지 2024.07.22 2 21
4728 잡담 닌슬)도-모, 뉴게이=상 2 file 김건담Mk-2 2024.07.24 2 21
4727 잡담 서울은 열돔 있을 때마단 덜 더운데 3 file IIIiiiIIiIIIi 2024.07.30 2 21
4726 잡담 주가가 대폭락을 하고 있군요 2 수상한변태 2024.08.05 1 21
4725 잡담 스팀에 찜해놓은 게임 5 file 정달호 2024.08.06 4 21
4724 잡담 하루 한번 아자아자아자젤 25일차(지각) file 코헤이교단둠브링어지부소속신도 2022.07.15 1 22
4723 잡담 [FGO] 2022.12.31. 데옹 메이드복 영의 실장 기원 file madmouse 2022.12.31 1 22
4722 잡담 안 아프던 허리가 갑자기 아파지기 시작했어 3 트라린 2024.07.01 2 22
4721 잡담 축구협회는 결국 홍명보를 택했구나 1 트라린 2024.07.07 1 22
4720 잡담 얼마만에 만나는 햇님인지 모르겠다 3 file 트라린 2024.07.10 2 22
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 242 Next
/ 242