펼침상태를 유지하고자 합니다

펼침상태를 유지하고자 합니다

QA

펼침상태를 유지하고자 합니다

본문

-------------test.html----------------

<style type="text/css">

div, ul, li { margin:0; padding:0; }

#Menu {
    float:left;
    margin:0px 5px 3px 5px;
    padding:0 0 3px 0;
    background-color:#5c5c5c;
}

#Menu ul li {
    float:left;
    list-style-type:none;
}

#Menu a {
    height:16px;
    color:#f1f1f1;
    font-family:arial;
    font-size:12px;
    padding:0 10px 0 10px;
    text-decoration:none;
}

#Menu ul ul {
    display:none;
    position:absolute;
    background-color:#5c5c5c;
}

#Menu ul li:hover ul {
    display: block;
}

#Menu ul ul li {
    float:none;
}

</style>


<div id="Menu">
<ul>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a>

<ul>
<li><a href="end.html">결과페이지로</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>

</li>


</ul>
</div>

-------------test.html----------------

 

---결과페이지---  

<style type="text/css">

div, ul, li { margin:0; padding:0; }

#Menu {
    float:left;
    margin:0px 5px 3px 5px;
    padding:0 0 3px 0;
    background-color:#5c5c5c;
}

#Menu ul li {
    float:left;
    list-style-type:none;
}

#Menu a {
    height:16px;
    color:#f1f1f1;
    font-family:arial;
    font-size:12px;
    padding:0 10px 0 10px;
    text-decoration:none;
}

#Menu ul ul {
    display:none;
    position:absolute;
    background-color:#5c5c5c;
}

#Menu ul li:hover ul {
    display: block;
}

#Menu ul ul li {
    float:none;
}

</style>

 

<div id="Menu">
<ul>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a>

<ul>
<li><a href="end.html">결과페이지로</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>

</li>


</ul>
</div>

<div>
결과페이지입니다! <br>
선택한 서브메뉴("결과페이지로")가 나온 상태로 펼침 상태가 유지 되고자 합니다. 

</div>

 

--------------------

위는 동작합니다..

위 내용대로 결과페이지에  선택한 서브메뉴("결과페이지로")가 나온 상태로 펼침 상태를 유지하려면 어데를 손봐야 하는지요..

미리 감사합니다.

이 질문에 댓글 쓰기 :

답변 2

#Menu ul ul {
    display:none;
    position:absolute;
    background-color:#5c5c5c;
}

#Menu ul li:hover ul {
    display: block;
}
여기보면 hover 했을떄 보이도록 해놓은거잖아요, 

 

결과페이지에서는 그냥 저 빨간부분을 display:block; 으로 바꾸세요

호버로 하게 되면. 다른 메뉴를 찾다보면 접히지 않는 이슈가 발생될수 있을 것 같네요.

 

해당 메뉴를 클릭하였을때 그 서브메뉴가 지속적으로 살아 있길 원하시니.

 

click 이벤트 발생시 해당 메뉴에 class 부여로 display:block; 부여하면 될것 같습니다.

 



$(document).ready(function () {
  $("#menu ul li").click(function () {
    $(this).parent('ul').addClass("on");  //해당 li를 클릭하면 그 위에 ul 에게 클래스 on을 부여한다.
  });
});

 

그리고 빠져나와 다른 메뉴에 hover 시에는 removeClass 로 on 을 제거하는 방식으로 구현하면 될것같네요.

 

저는 당장 생각나는 방법은 이것뿐이네여..

 

답변을 작성하시기 전에 로그인 해주세요.
전체 88
QA 내용 검색

회원로그인

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