티스토리 뷰

WEB/JQuery

폴더 메뉴 한글검색 전체 열기닫기 추가

silverline79 2026. 1. 22. 13:26 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>초성 검색 및 전체 제어 트리 탐색기</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/hangul-js"></script>
    <style>
        body { font-family: 'Malgun Gothic', sans-serif; padding: 20px; background: #f4f7f6; }
        .tree-container { background: #fff; width: 480px; margin: 0 auto; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
        
        /* 버튼 스타일 */
        .control-btns { display: flex; gap: 5px; margin-bottom: 10px; justify-content: flex-end; }
        .btn { padding: 6px 12px; font-size: 12px; cursor: pointer; border: 1px solid #ddd; background: #fff; border-radius: 4px; transition: 0.2s; }
        .btn:hover { background: #f8f9fa; border-color: #bbb; }

        .search-box input { width: 100%; padding: 15px; margin-bottom: 20px; border: 2px solid #e0e0e0; border-radius: 10px; box-sizing: border-box; outline: none; }
        .search-box input:focus { border-color: #3498db; }

        ul.tree, ul.tree ul { list-style: none; padding-left: 25px; }
        .folder, .file { padding: 6px 12px; cursor: pointer; border-radius: 6px; display: inline-block; margin: 2px 0; font-size: 14px; }
        .folder:hover, .file:hover { background: #ecf0f1; }

        /* 초기 상태: 전체 열림을 위해 기본 display를 block으로 설정하거나 JS로 제어 */
        .folder + ul { display: block; } 
        .highlight { background-color: #ffeaa7 !important; color: #d63031; font-weight: bold; }
        #no-result { display: none; color: #95a5a6; text-align: center; padding: 20px; }
    </style>
</head>
<body>

<div class="tree-container">
    <h2>📂 문서 탐색기</h2>

    <div class="control-btns">
        <button id="btn-expand" class="btn">전체 열기 +</button>
        <button id="btn-collapse" class="btn">전체 닫기 -</button>
    </div>
    
    <div class="search-box">
        <input type="text" id="tree-search" placeholder="초성(ㄱㅅ) 또는 단어로 검색...">
    </div>

    <div id="no-result">일치하는 항목이 없습니다.</div>

    <ul class="tree" id="main-tree">
        <li>
            <div class="folder active">📂 프로젝트</div>
            <ul>
                <li>
                    <div class="folder active">📂 기획단계</div>
                    <ul>
                        <li class="file">📄 결산보고서.pdf</li>
                        <li class="file">📄 사업계획서_v2.docx</li>
                    </ul>
                </li>
                <li>
                    <div class="folder active">📂 결과물</div>
                    <ul>
                        <li class="file">📄 최종디자인.jpg</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="file">📄 업무가이드라인.pdf</li>
    </ul>
</div>

<script>
$(document).ready(function() {
    
    // [1] 초기 설정: 모든 폴더를 active 상태로 (전체 열림 시작)
    // HTML 구조에서 이미 active를 넣어두었거나 아래 코드로 실행 가능합니다.
    $('.folder').addClass('active').next('ul').show();

    // [2] 개별 폴더 클릭 토글
    $(document).on('click', '.folder', function() {
        $(this).next('ul').slideToggle(200);
        $(this).toggleClass('active');
    });

    // [3] 전체 열기 버튼
    $('#btn-expand').on('click', function() {
        $('.folder').addClass('active').next('ul').slideDown(200);
    });

    // [4] 전체 닫기 버튼
    $('#btn-collapse').on('click', function() {
        $('.folder').removeClass('active').next('ul').slideUp(200);
    });

    // [5] 초성 검색 로직 (기존 유지)
    $('#tree-search').on('input', function() {
        const query = $(this).val().trim().toLowerCase();
        const $allLi = $('#main-tree li');
        const $noResult = $('#no-result');

        $('.folder, .file').removeClass('highlight');
        
        if (!query) {
            $allLi.show();
            $noResult.hide();
            return;
        }

        $allLi.hide();
        let hasVisibleItem = false;

        $allLi.each(function() {
            const text = $(this).children('.folder, .file').text();
            if (Hangul.search(text.toLowerCase(), query) !== -1) {
                $(this).show();
                $(this).parents('li').show();
                $(this).parents('ul').show();
                $(this).parents('ul').prev('.folder').addClass('active');
                $(this).children('.folder, .file').addClass('highlight');
                hasVisibleItem = true;
            }
        });

        hasVisibleItem ? $noResult.hide() : $noResult.show();
    });
});
</script>

</body>
</html>

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JQuery' 카테고리의 다른 글

전체 열기/닫기 & 동적 트리 통합 코드  (0) 2026.01.22
상세 클릭포함 트리메뉴  (0) 2026.01.22
폴더 트리메뉴 한글 검색포함  (1) 2026.01.22
폴더 트리메뉴  (0) 2026.01.22
모바일 전체 메뉴  (0) 2026.01.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함