Question

我有垂直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。

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：0)

Answer 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');
            }
        }); 
    });

Answer 2

使用第三方工具更容易实现这样的功能，有数百个插件可以添加此功能，其中许多都是免费的。

我个人的最爱之一（我并不怀疑社区最爱之一）是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了！您可以更改许多不同的属性以使其更加自定义。

Div内容垂直手风琴

2 个答案: