0

リストアイテムを展開/折りたたみしようとしています。テキストは単語の後に定義が続き、単語をクリックすると定義が表示/非表示になります。これはこれまでの私のコードです：

<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でこれを実現したいと思います。

4

1 に答える 1

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>
于 2012-09-07T09:58:03.837 に答える