JavaScript---闭合完成手拉风琴-优快云博客

本文介绍了一种使用纯JavaScript和CSS实现的手风琴效果，通过点击标题来展开或收起内容，同时确保每次只有一个内容块可见。代码示例中包含了多个可切换的内容块。

 <head>
  <style type="text/css">
    dl{
        width:200px;
        height:20px;
        margin-bottom:100px;
    }
    dt,dd{
        margin:0px;
    }
    .close{
        overflow:hidden;
    }
    .open{
        overflow:visible;
    }
  </style>
  <script type="text/javascript">
    function demo3(dtNode){
        //获取dl
        var dlNode=dtNode.parentNode;
        //获取所有的dl
        var dlList=document.getElementsByTagName("dl");
        //遍历dlList
        for(var x=0;x<dlList.length;x++)
        {
            //判断哪个dl是选中的
            if(dlNode==dlList[x]){
                //判断一下选中的dl隐藏还是现实
                if(dlNode.className=="close")
                {
                    dlList[x].className="open";
                }
                else{
                    dlList[x].className="close";
                }
            }
            else{
                dlList[x].className="close";
            }
        }
    }
  </script>
 </head>
 <body>
    <dl class="close">
        <dt  onclick="demo3(this);">描述标题1</dt>
        <dd>秒杀内容1_1</dd>
        <dd>秒杀内容1_2</dd>
        <dd>秒杀内容1_3</dd>
    </dl>
    <dl class="close">
        <dt  onclick="demo3(this);">描述标题2</dt>
        <dd>秒杀内容2_1</dd>
        <dd>秒杀内容2_2</dd>
        <dd>秒杀内容2_3</dd>
    </dl>
    <dl class="close">
        <dt  onclick="demo3(this);">描述标题3</dt>
        <dd>秒杀内容3_1</dd>
        <dd>秒杀内容3_2</dd>
        <dd>秒杀内容3_3</dd>
    </dl>
    <dl class="close">
        <dt  onclick="demo3(this);">描述标题4</dt>
        <dd>秒杀内容4_1</dd>
        <dd>秒杀内容4_2</dd>
        <dd>秒杀内容4_3</dd>
    </dl>
 </body>