定制手风琴 - 使用每个

Question

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

但我不想为页面上的六个

元素设置六个代码块。

有没有办法通过 .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>

加载页面时，所有类名为“msg_body”的元素都会折叠。

jQuery的“slideToggle()”函数用于展开和折叠类“msg_body”的“div”。

当用户单击类为“.msg_head”的元素，然后单击其旁边类为“msg_body”的 div 时，会以滑动效果进行切换，使用 jQuery 制作切换面板。

Answer 2

检查这个也很简单
演示： http://demos.pankaj.pro/ jquery-tutorial-guide-to-build-a-simple-accordion/

代码
http://time2hack .com/2013/01/jquery-tutorial-guide-to-build-a-custom-and-simple-accordion.html