펼치기 펼치기 Div 목록

목록 항목을 확장/축소하려고합니다. 텍스트는 단어 다음에 정의가 나오고, 단어를 클릭하면 정의가 나타나거나 사라집니다. 이것은 지금까지 내 코드입니다 : 펼치기 펼치기 Div 목록

<html> 
<script type="text/javascript"> 

function toggleVisibility(listItem) { 
var listItemDiv = document.getElementById(listItem); 

if(listItemDiv.style.visibility == 'hidden') { 
     listItemDiv.style.visibility = 'visible'; 
    } else { 
     listItemDiv.style.visibility = 'hidden'; 
    } 


} 

</script> 

<div onclick="toggleVisibility('p1')">p1</div><div id=p1>p1's text</div></br> 
p2<div id=p2>p2's text</div></br> 
p3<div id=p3>p3's text</div></br> 
p4<div id=p4>p4's text</div></br> 
p5<div id=p5>p5's text</div></br> 

</html>

그러나이 코드는 붕괴의 내 텍스트 isntead을 숨 깁니다/확장합니다. 자바 스크립트를 통해이를 달성하는 것이 바람직합니다.

출처

2012-09-07 CodeMonkey

jQuery를 잘하고 매우 효과적인 옵션 같은 것들에 대한. –

jQuery 코드를 찾았습니다. 하지만 그것을 이해하지 못했습니다 그것을 사용하지 않으려 고 노력 http://jsfiddle.net/LVsJs/1/ – CodeMonkey

축소 축소 기능은 일반적으로 UL과 LI의를 활용하고 당신은 div를 사용하고 있습니다. 그래서 나는 당신이 직접 코딩해야 할 것 같아요. . 그런 일이 UL Li의 –

솔루션 :

function toggleVisibility(listItem) { 
var listItemDiv = document.getElementById(listItem); 

if(listItemDiv.style.display == 'none') { 
     listItemDiv.style.display = 'block'; 
    } else { 
     listItemDiv.style.display = 'none'; 
    } 
}

또는

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(window).load(function(){ 
    $('dt').click(function(){ 
       var dl = $(this).parent(); 
       $('dd',dl).slideToggle(); 
    }); 
});   
</script> 

<dl> 
    <dt> 
     item1 
    </dt> 
    <dd> 
     item1.description 
    <dd> 
</dl> 

</html>

출처

2012-09-07 09:58:03 CodeMonkey

펼치기 펼치기 Div 목록

답변

관련 문제