<div>지금 자바스크립트 만 사용하여 트리메뉴를 구성하는 것을 하고 있는데,</div> <div> </div> <div>로직쪽에 문제가 발생하여 아무리 생각해도 타개책이 나질 않아 염치불구하고 이렇게 질문글을 올립니다..</div> <div> </div> <div>현재 트리의 기본적인 기능인 추가,삭제 등의 기능은 구현이 되어 있으나,</div> <div> </div> <div>더블클릭 했을때 메뉴를 펼치거나 접는 Function에서 문제가 생겼습니다.</div> <div> </div> <div>현재</div> <div> </div> <div>        var menus = [<br>    [1, 0, '회사'],<br>    [2, 1, '경영지원부'],<br>    [3, 1, '사업부1'],<br>    [4, 1, '사업부2'],<br>    [5, 1, '사업부3'],<br>    [6, 1, '사업부4'],<br>    [7, 6, '자식노드1'],<br>    [8, 6, '자식노드2'],<br>    [9, 6, '자식노드3'],<br>    [10, 9, '자식자식노드1'],<br>    [11, 9, '자식자식노드2'],<br>    [12, 1, '사업부5'],</div> <div>//ID, 부모값, 이름<br>        ];</div> <div> </div> <div>이렇게 있는데,</div> <div> </div> <div>자식노드3를 더블클릭하면, 9번(자식노드3)을 parent로 하는 자식자식노드1과 자식자식노드2는 display가 none으로되어 보이지 않게 됩니다.</div> <div>그런데 문제는, 이 상태에서 9번(자식노드3)의 parent인 6번(사업부4)를 더블클릭하면, 6번을 부모로 하는 자식노드1, 자식노드2, 자식노드3은 이상없이 접혀지나, display=none처리 되었던 자식자식노드1과 자식자식노드2가 block로 바뀌며 화면에 나타나게 됩니다.</div> <div> </div> <div>해당 기능이 사용되어 문제가 되고 있는 Function은 중앙쯤의 //메뉴 펼치기 접기 function closeMenu(fid)입니다.</div> <div> </div> <div>F12의 개발자 도구로 보시면 아시겠지만 구조가 전부 <ui> <li>가 아닌 전부 <div>형태의 형제 노드로 구성이 되어있다 보니</div> <div>원하는 결과를 얻기 위해서는 다소 난해한 문제를 해결해야 할 것 같습니다.</div> <div> </div> <div>최상위 부모 노드를 찾아 더블클릭하면 최상위 부모 노드를 제외한 모든 하위 노드의(하위의 하위, 또 그 하위의 하위...) display값이 none, block 여부와 관계없이 전부 다 none처리로 하고 싶습니다. </div> <div> </div> <div>혹시 해당 방법에 대하여 방법이 있다면, 그 방향이라도 제시해 주시면 감사하겠습니다...</div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div>코드는 아래와 같습니다.</div> <div> </div> <div> </div> <div> </div> <div><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></div> <div>    <!-- Default 값 --><br>    <script type="text/javascript"><br>        //포커스<br>        var focusid = null;</div> <div>    </script></div> <div>    <!-- 함수 선언 부분 --><br>    <script type="text/javascript"><br>        // 메뉴 구성<br>        function makeMenu(id, dep) {<br>            for (var i = 0, length = menus.length; i < length; i++) {<br>                var html = "";<br>                if (id === menus[i][1]) {<br>                    //노드 세팅 후 도큐먼트에 추가<br>                    var node = document.createElement('div');<br>                    node.setAttribute('id', menus[i][0]);<br>                    node.setAttribute('parent', menus[i][1]);<br>                    node.setAttribute('onclick', 'getId(' + menus[i][0] + ');' + 'ChangeBackground(' + menus[i][0] + ')');<br>                    node.setAttribute('ondblclick','closeMenu(' + menus[i][0] + ')');<br>                    var depthSpace = addDepth(dep);<br>                    node.appendChild(document.createTextNode(depthSpace + menus[i][2]))<br>                    document.getElementById('root').appendChild(node);<br>                    makeMenu(menus[i][0], dep + 1);<br>                }<br>            }<br>            return node;<br>        }</div> <div>        //노드 클릭시 index 값 받기<br>        function getId(id) {<br>            //alert(id)<br>            focusid = id;<br>        }</div> <div>        //Depth 설정<br>        function addDepth(depth) {<br>            var depthSpace = "";<br>            for (var i = 0; i < depth; i++) {<br>                depthSpace += "ㅁ";<br>            }<br>            return depthSpace;<br>        }</div> <div>        //클릭된 노드의 자식 노드 추가(+버튼)<br>        function addNodes(fid) {<br>            if (fid === null) {<br>                alert("하위 메뉴를 추가할 상위 메뉴를 선택해 주세요.");<br>                return;<br>            }</div> <div>            //idArray에 menus의 0번째(id)값을 배열로 삽입<br>            var idArray = new Array;<br>            for (var i = 0 ; i < menus.length; i++) {<br>                idArray[i] = menus[i][0];<br>            }<br>            //id값 중 max 값 구하기<br>            var maxValue = Math.max.apply(null, idArray);<br>            //텍스트박스의 값<br>            var txtValue = document.getElementById("txtName")<br>            if (txtValue.value != "") {<br>                //menus의 맨 뒤에 새로운 값 추가<br>                menus.push([maxValue + 1, fid, txtValue.value]);<br>            }<br>                //텍스트박스에 값이 없을 경우 예외처리<br>            else {<br>                alert("텍스트박스에 값을 입력하세요");<br>                return;<br>            }<br>            //노드 전부 삭제 한 뒤에 새로 생성<br>            var delNode = document.getElementById("root");<br>            while (delNode.hasChildNodes()) {<br>                delNode.removeChild(delNode.firstChild);<br>            }<br>            makeMenu(0, 1);<br>        }</div> <div><br>        //클릭된 노드의 삭제(-버튼(수정중)<br>        function deleteNode(fid) {<br>            if (fid === 1) {<br>                alert("디폴트 ID는 삭제할 수 없습니다");<br>                return;<br>            }<br>            for (var i = 0; i < menus.length; i++) {<br>                if (menus[i][0] === fid) {<br>                    //id가 focusid인 값 잘라내기<br>                    menus.splice(i, 1);<br>                    //부모id가 focusid인 값 잘라내기<br>                    deleteParentNode(fid);<br>                }<br>            }<br>            //노드를 전부 삭제한 후 새로 생성하기<br>            var delNode = document.getElementById("root");<br>            while (delNode.hasChildNodes()) {<br>                delNode.removeChild(delNode.firstChild);<br>            }<br>            makeMenu(0, 1);<br>        }</div> <div>        //부모id가 focusid인 값 잘라내기<br>        function deleteParentNode(pid) {<br>            for (var i = 0; i < menus.length; i++) {<br>                if (menus[i][1] === pid) {<br>                    var id = menus[i][0];<br>                    menus.splice(i, 1);<br>                    //parentID를 보내 부모값이 같으면 삭제<br>                    deleteParentNode(pid);<br>                    //자기 ID를 parentID로 하는 자식 노드값을 삭제<br>                    deleteParentNode(id);<br>                }<br>            }<br>        }</div> <div>        //클릭한 div 색상 변환<br>        function ChangeBackground(itemID) {<br>            itemClear();<br>            var item = document.getElementById(itemID);<br>            item.className = "menuclick";<br>        }<br>        //색상 변환 초기화<br>        function itemClear() {<br>            var idArray = new Array;<br>            for (var i = 0 ; i < menus.length; i++) {<br>                //id값 이전<br>                idArray[i] = menus[i][0];<br>                //이전된 id값 삽입<br>                document.getElementById(idArray[i]).className = "menudefault";<br>            }<br>            idArray = null;<br>        }</div> <div>        //메뉴 펼치기 접기<br>        function closeMenu(fid) {</div> <div>            for (var i = 0; i < menus.length; i++) {<br>                if (menus[i][1] === fid) {<br>                    var id = menus[i][0];</div> <div>                    if (document.getElementById(id).style.display == 'none') {<br>                        //if (document.getElementById(fid).style.display == '' || document.getElementById(fid).style.display == 'block') {<br>                        //    document.getElementById(id).style.display = 'none';<br>                        //}<br>                        document.getElementById(id).style.display = 'block';<br>                    }</div> <div>                    else if (document.getElementById(id).style.display == 'block' || document.getElementById(id).style.display == '') {<br>                        //if (document.getElementById(fid).style.display == 'none') {<br>                        //    document.getElementById(id).style.display = 'none';<br>                        //}<br>                        document.getElementById(id).style.display = 'none';<br>                    }<br>                    //자식노드의 자식도 숨기기<br>                    closeMenu(id);<br>                }<br>            }<br>        }</div> <div>    </script></div> <div>    <!-- 실행 부분 --><br>    <script type="text/javascript"><br>        window.onload = function () {<br>            makeMenu(0, 1);<br>            //document.getElementById('root').innerHTML += defaultValue;<br>            //document.getElementById('root').appendChild(node);<br>        }<br>        var menus = [<br>    [1, 0, '회사'],<br>    [2, 1, '경영지원부'],<br>    [3, 1, '사업부1'],<br>    [4, 1, '사업부2'],<br>    [5, 1, '사업부3'],<br>    [6, 1, '사업부4'],<br>    [7, 6, '자식노드1'],<br>    [8, 6, '자식노드2'],<br>    [9, 6, '자식노드3'],<br>    [10, 9, '자식자식노드1'],<br>    [11, 9, '자식자식노드2'],<br>    [12, 1, '사업부5'],<br>        ];<br>    </script></div> <div>    <style type="text/css"><br>        .depth {<br>            padding-left: 20px;<br>        }</div> <div>        .main {<br>            border: 1px solid black;<br>            width: 300px;<br>        }</div> <div>        .menuclick {<br>            background-color: #0099FF;<br>            font-weight: bold;<br>        }</div> <div>        .menudefault {<br>            background-color: #FFFFFF;<br>            font-weight: normal;<br>        }<br>    </style></div> <div></asp:Content><br><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><br>    <table><br>        <tr><br>            <td style="vertical-align:top; width:300px;"><br>                <div class="main" id="root"></div><br>            </td><br>            <td style="vertical-align: top; width: 300px;"><br>                <input type="button" id="btnAdd" onclick="addNodes(focusid)" value="추가" /><br>                <input type="text" id="txtName" onkeydown="if (event.keyCode == 13)<br>        {document.getElementById('btnAdd').click(); return false;}" /><br>                <br /><br>                <input type="button" id="btnDelete" onclick="deleteNode(focusid)" value="삭제" /></div> <div>            </td><br>        </tr><br>    </table><br></asp:Content><br></div> <div> </div> <div>감사합니다.</div>