展开折叠Div列表

Question

我正在尝试扩展/折叠列表项。 文字将是单词，后面是定义，在单击单词时定义会出现/消失的地方。 到目前为止，这是我的代码：

<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实现。

Answer 1

解决方案：

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>

展开折叠Div列表

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-09-07 09:58:03

展开折叠Div列表

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-09-07 09:58:03

解决方案1
1 已采纳 2012-09-07 09:58:03