Div 内容垂直手风琴答案

【问题标题】：Div content vertical accordionDiv 内容垂直手风琴
【发布时间】：2013-11-25 13:38:21
【问题描述】：

我有垂直 div 列表，我正在尝试创建内容手风琴。

布局大概是这样的：

<div class='item'>
   <li class='title'>...some a tag here...</li>
   <div class='content'></div>
</div>
<div class='item'>
   <li class='title'>...some a tag here...</li>
   <div class='content'></div>
</div>

div 类项应列在其他项下，div 类内容应隐藏，单击 div 类项时，内容应垂直扩展。

谁能帮我做一个基本的设置？我做不到。

请记住，不必具有完全相同的布局（其中包含 div 和 li 元素），如果有更好的组织方式，我可以更改和修改。

我正在使用 jquery。

【问题讨论】：

请检查我的答案
请注意，将<li> 标签放在除<ul> 或<ol> 标签之外的任何内容中也是无效的HTML。虽然这仍然会呈现它不符合 HTML 规范。
是的，我明白，我只是为演示缩短代码。
@Toniq 请检查我的答案。如果对您的需求有所帮助，请勾选绿色标记。

标签： jquery accordion

【解决方案1】：

你不需要任何 jquery 插件 检查这个http://jsfiddle.net/modaloda/3R2Jd/1/

        $(document).ready(function () {

        $(".title").click(function () {

            $(".content").slideUp("fast");

            $(this).find('.expand').removeClass('collapse');
            if ($(this).next().is(":hidden") == true )
            {
                $('.expand').removeClass('collapse');
                $(this).next().slideDown("normal")
                $(this).find('.expand').addClass('collapse');
            }
        }); 
    });

【讨论】：

【解决方案2】：

使用 3rd 方工具来执行此类功能要容易得多，有数百个插件可以添加此功能，其中许多是免费的。

我个人的最爱之一（我毫不怀疑社区的最爱之一）是jQuery UI

jQuery UI 具有易于使用的 Accordion 功能。

See here for examples

您只需将插件添加到页面并以某种方式构建您的内容即可使其发挥作用。

例子：

<div id="accordion">
   <h3>...some a tag here...</h3>
   <div class='content'></div>
   <h3>...some a tag here...</h3>
   <div class='content'></div>
</div>

jQuery : $( "#accordion" ).accordion();

现在您已经拥有了完整的 jQuery Accordions！您可以更改许多不同的属性以使其更具自定义性。

【讨论】：