JSP UL 목록 요소 동적 선택 여기

Question

상황이다 난 내 탐색 모음에서 중첩 된 UL 목록이 즉

<li> 
<ul> 
<li> 
Some link 
</li> 
</ul> 
</li> 
</ul> 

이 내 타일의 왼쪽에있는 탐색 모음은 오른쪽에 내용이 그것과 관련있다.

그래서 중첩 된 li을 선택할 때마다 특정 li (중첩되지 않음)가 열리길 원합니다. 어떻게 그것을, 어떤 식 으로든 CSS 또는 자바 스크립트로 할 수 있습니다.

추신 : 저는 멍청한 웹 개발자입니다. 쉬운 해결책을 제안하십시오.이 질문은 이전에 물어볼 수도 있지만 쉬운 대답을 찾을 수 없으므로 낮은 점수를주지 마십시오. 감사합니다.

Answer 1

클릭하여 표시하려는 경우 CSS 유사 요소 : target을 사용할 수 있습니다. 이것은 당신이 기본적으로해야 할 것입니다 :

귀하의 HTML 마크 업 :

/* basic menu styling */ 
ul.menu { 
    position:relative; 
} 

ul.menu li { 
    display:block; 
    position:relative; 
    float:left; 
} 

ul.menu a { 
    display:block; 
    text-decoration:none; 
} 

ul.menu > li { 
    border:1px solid #000; 
    min-width:100px; 
    margin-left:-1px; 
} 

/* set up nested ul's and hide them */ 
ul.menu > li ul { 
    display:none; 
    position:absolute; 
    width:100%; 
    top:0; 
    left:0; 
} 

/* show them on click */ 
ul.menu > li:target ul { 
    display:block; 
} 

ul.menu > li > ul > li { 
    float:none; 
    display:block; 
} 

:

<ul class="menu clearfix"> 
    <li id="a"> 
     <a href="#a">Item 1</a> 
     <ul class="clearfix"> 
      <li><a href="#">Item 1.1</a></li> 
      <li><a href="#">Item 1.2</a></li> 
     </ul> 
    </li> 
    <li id="b"> 
     <a href="#b">Item 2</a> 
     <ul class="clearfix"> 
      <li><a href="#">Item 2.1</a></li> 
      <li><a href="#">Item 2.2</a></li> 
     </ul> 
    </li> 
    <li id="c"> 
     <a href="#c">Item 3</a> 
     <ul class="clearfix"> 
      <li><a href="#">Item 3.1</a></li> 
      <li><a href="#">Item 3.2</a></li> 
     </ul> 
    </li> 
</ul> 

CSS는 (이 요소에 각 부모 LI에게 앵커 내부의 고유 ID와 a 요소주세요)

demonstration에 작은 피들을 씁니다.