使用.slidetoggle使div在页面加载时再次展开和折叠 [英] Use .slidetoggle to make div expand and collapse again on page load

问题描述

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

Hi guys i have a div box with text which is hidden until you click a button and then it .slideToggles open to its height and then when you click again it toggles closed.

现在，我要执行的操作是在页面加载时使框展开，然后再次折叠并停止(而不是自动重复)，以便人们看到隐藏的内容并单击按钮.有人能帮忙吗??我不太喜欢jQuery.

Now what i would like to do is on page load for the box to expand and then collapse again and stop (not auto repeat ), so that people see that there is content hidden away and to click the button. Can anyone help with this?? I'm not big into 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');
                });
            });

任何帮助将不胜感激.我以为您可以一开始就做两个背对背的幻灯片切换，但不是很麻烦.

Any help would be greatly appreciated. I thought you could just do two slidetoggles back to back at the beginning but obvioulsy not.

谢谢大家.

推荐答案

尝试一下:

$(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/

这篇关于使用.slidetoggle使div在页面加载时再次展开和折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！