Question

所以这是我的问题 - 我现在还不太熟悉编程，所以请耐心等待：

我想在我的页面上有一个对象列表，每个对象都用作打开div的切换。那部分我已经失败了！我无法弄清楚的是如何使它在打开的对象下面的div滑动到新打开的div下面。目前，他们只是坐在已打开的div内的顶部。谢谢！

Answer 1

它被称为手风琴效果。查看jQuery UI手风琴效果here

Here这是一个非常简单的手风琴效果版本，我只是用jQuery创建它。

Answer 2

您要问的效果已经可以通过jQuery javascript库获得。 jQuery ui抽象提供accordion效果。

来自jqueryui.com：

<!-- this is the format of the html markup needed -->
<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

和

<script>
    //and the JavaScript code for it
        $(function() {
        $( "#accordion" ).accordion();
    });
</script>

Answer 3

如果仅适用于小型项目，请不要使用JQuery UI。您可以使用常规方法关闭单击触发器时打开的所有面板，并打开最接近下一个按钮的面板：

$(function() {
    // Hide all panels
    $('#accordion .content').hide();
    // Add active class to the first trigger, then find the next panel and open with .slideDown() effect
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    // When the trigger is clicked...
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Remove all "active" classes and close all the panels that has been opened.
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            // Open one panel that placed right next to the trigger
            // only if the next panel is hidden
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

以下是一个示例：http://jsfiddle.net/tovic/CzE3q/ 希望这有帮助：）

当上面的div打开时，使div向下滑动（不打开）

3 个答案: