JQ实现accordion(可折叠)效果

最新推荐文章于 2023-04-08 08:17:18 发布

weixin_30646505

最新推荐文章于 2023-04-08 08:17:18 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mc67/p/4801410.html

本文将介绍如何通过HTML、CSS和jQuery实现手风琴效果，包括代码实现、原理解析和示例展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果--这个就是手风琴的效果；

原理：首先默认section1下面的dd可见，其他的全部隐藏；当点击某个obj时候，

快速隐藏全部的dd，然后只有obj.NEXT().show（）,

实现：

HTML

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
    <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
    <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
    <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
    <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

css

.accordion {
  width: 500px;
  border: 1px solid #ccc;
  border-bottom: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.accordion dt, 
.accordion dd {
  border-bottom: 1px solid #ccc;
  margin: 0px;
}
.accordion dt {
  background: #eaeaea;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: bold;
}
.accordion dd {
  padding: 12px 8px;
}


JQ 代码：

 $(function (){
    //在载入的时候除了第一个 通通隐藏；

   //或者 也可以在css中直接设置

    $("dl>dd:gt(0)").addClass("dis");

    $("dl>dt").click(function (){
    $("dl>dd").each(function () {
            this.style.display = "none";
           }

      })
         $(this).next().slideDown('normal');
     })
 })