Javascript 展开折叠Div列表_Javascript_Html

Javascript 展开折叠Div列表

javascript html

Javascript 展开折叠Div列表,javascript,html,Javascript,Html,我正在尝试展开/折叠列表项。文本将是word，后跟定义排序，即单击word时定义出现/消失的位置。这是我目前的代码： <html> <script type="text/javascript"> function toggleVisibility(listItem) { var listItemDiv = document.getElementById(listItem); if(listItemDiv.style.visibility == 'hidden') {

我正在尝试展开/折叠列表项。文本将是word，后跟定义排序，即单击word时定义出现/消失的位置。这是我目前的代码：

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


功能切换可见性（listItem）{
var listItemDiv=document.getElementById（listItem）；
如果（listItemDiv.style.visibility=='hidden'）{
listItemDiv.style.visibility='visible'；
}否则{
listItemDiv.style.visibility='hidden'；
}
}
p1p1的文本

p2p2的文本

P3的文本

P4的文本

P5的案文

但是，此代码隐藏了我的文本，而不是折叠/展开。我希望最好通过javascript实现这一点

解决方案：

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>


$（窗口）。加载（函数（）{
$（'dt'）。单击（函数（）{
var dl=$（this.parent（）；
$（'dd'，dl）.slideToggle（）；
});
});          
项目1
项目1.说明

jQuery是很好的、非常有效的选择。找到jQuery代码。但我不理解它，所以尝试不使用它折叠扩展功能通常使用UL和LI，而您在这里使用的是div。所以我猜您必须自己编写代码。因为这样的示例可能会使用UL LI的jQuery，并从中删除if条件，然后使用$（'#'+listItem）。slideToggle（）；它可能会给你带来你想要的滑动效果，这在CSS3动画中是可能的，但这比jQuery还要复杂。所以使用jQuery。