세로형 3단 메뉴 질문있습니다.

세로형 3단 메뉴 질문있습니다.

QA

세로형 3단 메뉴 질문있습니다.

본문

순수 자바스크립트로 메뉴 구현을 공부하고있습니다.

각 번호의 메뉴를 클릭하면 서브메뉴가 나오도록 하고싶은데 방법이 없을까요?

클릭한 그 요소만 선택해서 할수있을것같은데  아무리 생각을 해봐도 방법을 모르겠습니다.

링크 걸어 두었습니다. 

https://codepen.io/frmqytak-the-encoder/pen/WNdjYME

이 질문에 댓글 쓰기 :

답변 3

2단메뉴에서부터 코드가 좀 오류가있네요,

우리가 클릭할것은 li 들이여서 오류가 나고있는부분입니다.  ul 을 클릭하였을때. 가 되어 버리니까 하위 자식을 찾아서 보여져라~ 하기도 어렵구요 

html 구조도 3단메뉴는 각 li 안에 들어가 있어야 할듯합니다.

 

저라면 아래처럼 코드를 구성할 것입니다. 옆으로 스르르 이동하는 건 본인이 보태 넣으세요.

 


<style>
.menu { margin-left:20px; cursor:pointer; }
.sub { margin-left:40px; }
</style>
<div id=buttonDiv style=cursor:pointer>메뉴</div>
<div id=toggleDiv style=display:none>
    <div class=menu>메뉴1</div>
    <div class=sub>
        <div>메뉴1_1</div>
        <div>메뉴1_2</div>
        <div>메뉴1_3</div>
        <div>메뉴1_4</div>
        <div>메뉴1_5</div>
    </div>
    <div class=menu>메뉴2</div>
    <div class=sub>
        <div>메뉴2_1</div>
        <div>메뉴2_2</div>
        <div>메뉴2_3</div>
        <div>메뉴2_4</div>
        <div>메뉴2_5</div>
    </div>
    <div class=menu>메뉴3</div>
    <div class=sub>
        <div>메뉴3_1</div>
        <div>메뉴3_2</div>
        <div>메뉴3_3</div>
        <div>메뉴3_4</div>
        <div>메뉴3_5</div>
    </div>
    <div class=menu>메뉴4</div>
    <div class=sub>
        <div>메뉴4_1</div>
        <div>메뉴4_2</div>
        <div>메뉴4_3</div>
        <div>메뉴4_4</div>
        <div>메뉴4_5</div>
    </div>
    <div class=menu>메뉴5</div>
    <div class=sub>
        <div>메뉴5_1</div>
        <div>메뉴5_2</div>
        <div>메뉴5_3</div>
        <div>메뉴5_4</div>
        <div>메뉴5_5</div>
    </div>
</div>
<script>
buttonDiv.onclick = function() {
    toggleDiv.style.display = toggleDiv.style.display == "block" ? "none" : "block";
}
function subNone() {
    for (i of document.getElementsByClassName("sub")) i.style.display = "none";
}
menu = document.getElementsByClassName("menu");
for (j = 0; j < menu.length; j++) {
    menu[j].j = j;
    menu[j].onclick = function() {
        subNone();
        document.getElementsByClassName("sub")[this.j].style.display = "block";
    }
}
subNone();
</script>

그런데 메뉴가 펼쳐진 상태에서는 다시는 안들어가는데... 이게 무슨 의미인지 모르겠습니다.

<div>메뉴1_1</div> 이것의 경우는 본인이 아래처럼 링크를 거셔야죠.
<div><a href="경로">메뉴1_1</a></div>

그 링크페이지까지 만들어 달라시려면 제작의뢰를 하셔야 합니다.

제가 말을 잘못한거같네요.
펼쳐진 메뉴가 있는 상태일때 메뉴를 접었다펼치면
계속 펼쳐진 상태로 되더라구요 전 그부분을 고치고싶어서 그랬습니다 바쁘신데 답글은 안 달아 주셔도 될것같습니다

그니까 각개 버튼에 토글기능을 넣고 싶은 거군요.

그리 어렵진 않습니다. 스크립트만 아래처럼 고치세요.

"토글기능"이라는 단어 한 마디만 하셨으면 처음부터 서로 의사소통이 편했을 텐데요.


<script>
buttonDiv.onclick = function() {
    toggleDiv.style.display = toggleDiv.style.display == "block" ? "none" : "block";
}
function subNone() {
    for (i of document.getElementsByClassName("sub")) i.style.display = "none";
}
menu = document.getElementsByClassName("menu");
for (j = 0; j < menu.length; j++) {
    menu[j].j = j;
    menu[j].onclick = function() {
        for (k = 0; k < menu.length; k++) {
            if (k == this.j) document.getElementsByClassName("sub")[k].style.display = document.getElementsByClassName("sub")[k].style.display == "block" ? "none" : "block";
            else document.getElementsByClassName("sub")[k].style.display = "none";
        }
    }
}
subNone();
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT