2011-09-23 7 views
-1

부모 목록의 한 점을 클릭하면 하위 목록을 표시하고 싶습니다 (위키 피 디아 기사의 콘텐츠 표를 최소화하고 최대화 할 수있는 것과 유사). 어떻게 할 수 있습니까?클릭 이벤트에 표시 할 목록

몇 년 전에 기본 HTML을 배웠고 배운 후에도이를 수행하는 방법을 기억할 수 없습니다. 도와 주셔서 감사합니다.

+0

자바 스크립트 + DOM 어쩌면? 혼자서 해봤습니까? – JohnFx

답변

1

(자바 스크립트 또는 jQuery를) 당신은 할 수 없습니다 이 작업을 수행.

JS

$('#nav > li').click(function() { 
    $(this).find('ul').toggle(); 
}); 

HTML : 여기

jQuery와 예입니다

<ul id="nav"> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item 
     <ul class="sub-menu"> 
      <li>Menu item</li> 
      <li>Menu item</li> 
      <li>Menu item</li>   
     </ul> 
    </li> 
</ul> 

코드 : http://jsfiddle.net/4mgqK/2/

+0

늦었어도 알지만, 놈이 나를 멍청이가되게 할 수 있다면, 내가 그들을 어떻게 배치해야하는지 말해 줄 수 있니? 하나의 파일에 모든 코드가 있습니까? 아니면 JS와 HTML 파일이 분리되어 있습니까? 그들이 어떤 이름으로 분리되어야한다면? – Oxwivi

+0

이름을 어떻게 지어도 상관 없습니다. 같은 페이지에 스크립트와 마크 업을 모두 가지고 있다면 jQuery 라이브러리를 참조하는 것을 잊지 마십시오. 별도의 파일이 필요하면이 파일을 참조해야합니다. 그리고이 스크립트를'$ (document) .ready (function() {// * code here * /}) '로 감싸는 것을 잊지 마라. " – Samich

+0

그래서 내 페이지 상단에 답안에 쓴 내용을 정확히 적어 놓았다. 이제는 언급 했으므로,'ul' 태그에서'nav' 문서에 대한 언급에 주목합니다. 감사! – Oxwivi

0

트리 뷰입니까? 그렇다면 jsTree과 같은 것이 귀하의 목적에 부합 할 수 있습니다.

예를 들어 div 요소에 포함 된 HTML 블록 만 표시하거나 숨기려면 jQuery toggle이 필요할 수 있습니다.

0

당신은 이것을 달성하기 위해 자바 스크립트를 사용할 수 있습니다. jQuery를 사용하는 경우 매우 간단하지만 jQuery를 페이지에 추가해야한다. 기본 jQuery를에 대한 자세한 정보는 여기에서 찾을 수 있습니다 : 당신이 jQuery를 가져 오는 경우

http://docs.jquery.com/How_jQuery_Works

, 당신이 이런 식으로 수행 할 수있는 스크립트 Withou

$("#parentElementId").click(function() 
// if your parentElement has been clicked, excecute this function 
{ 
    $("#childElementId").show(); // if it has been hidden before with css(display:none) 
}); 
관련 문제