展開收起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>

但是，此代碼隱藏我的文本是不是崩潰/展開。我希望通過javascript來實現這一點。

來源

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列表

回答

相關問題