定制手风琴 - 使用每个

Question

我正在尝试为我的页面创建一个自定义手风琴来显示我的帖子。我使用HTML以列表格式使用它，并且当您单击每个标题以展开以显示更多信息时，我正在尝试创建效果。

但我不想为页面上的六个<li>元素说六个代码块。

有没有办法通过.each（）;也许？而不是创建每个部分？尝试更有活力的方法。

Answer 1

您是否看过本教程？

因为，这个示例说明，因此不需要多个条件实现这一目标。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

  

所有具有类名称的元素<！>＃8220; msg_body <！>＃8221;在页面加载时折叠。

     

<！>＃8220; slideToggle（）<！>＃8221; jQuery的功能用于扩展和折叠<！>＃8220; div <！>＃8221;与班级<！>＃8220; msg_body <！>＃8221;。

     

当用户点击带有类<！>＃8220; .msg_head <！>＃8221;的元素时，则div与类<！>＃8220; msg_body <！>＃8221;在它旁边，使用滑动效果切换，使用jQuery制作切换面板。

Answer 2

检查这个也很简单 演示： http://demos.pankaj.pro/ jquery的教程引导到内建一个简单手风琴/

代码 http：// time2hack的.com / 2013/01 / jquery的教程引导到堆积一个定制和 - 简单accordion.html