使用 .slidetoggle 使 div 在页面加载时再次展开和折叠

Question

大家好，我有一个带有文本的 div 框，它是隐藏的，直到您单击按钮，然后它 .slideToggles 打开到其高度，然后当您再次单击时它会切换关闭。

现在我想做的是在页面加载时让框展开，然后再次折叠并停止（不是自动重复），以便人们看到隐藏的内容并单击按钮。有人可以帮忙吗？我不太喜欢 jQuery。

这就是我所拥有的。

        $(document).ready(function() {

            $("#page-information").hide();
                $(".info-tab").toggle(function() {
                    $(".info-tab").addClass("info-active");
                    }, function () {
                    $(this).removeClass("info-active");
                }); 
                $(".info-tab").click(function() {
                    $("#page-information").slideToggle('slow');
                });
            });

任何帮助将不胜感激。我以为你可以在一开始就连续进行两次滑动切换，但显然不行。

谢谢你们。

Answer 1

尝试一下：

$(document).ready(function() {

    $("#page-information").slideDown('slow', function(){
        setTimeout("$('#page-information').slideUp('slow');", 500);
    });
    $(".info-tab").toggle(function() {
        $(".info-tab").addClass("info-active");
        }, function () {
        $(this).removeClass("info-active");
    });
    $(".info-tab").click(function() {
        $("#page-information").slideToggle('slow');
    });
});

它的工作示例： http://jsfiddle.net/ufomammut66/yRqqq/2/

Answer 2

也许是这个？

$(document).ready(function() {

   $(".info-tab").toggle(function() {
       $(".info-tab").addClass("info-active");}
   });

   setTimeout(function(){
       $(".info-tab").toggle(function() {
          $(this).removeClass("info-active");
          $("#page-information").slideToggle('slow');
       });
    }, 1000);



        $("#page-information").hide();
            $(".info-tab").toggle(function() {
                $(".info-tab").addClass("info-active");
                }, function () {
                $(this).removeClass("info-active");
            }); 
            $(".info-tab").click(function() {
                $("#page-information").slideToggle('slow');
            });
        });