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';
    }   
}

OR

<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 个答案: