如何在jQuery中默认打开一个面板

时间:2012-03-05 20:51:38

标签: jquery jquery-ui

我很抱歉这个问题有多简单,但我无法找到我要找的信息。我的页面上有两个div,它们由一些将打开和关闭它们的jQuery控制。当页面加载时,它们都默认为关闭。我想知道如何在页面加载或发回帖子时默认打开(loginDiv)?我是jQuery的新手,现在帮助我的人不是一个选择。提前谢谢!

以下是代码:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
    // <![CDATA[

    (function($) {
        var containers = ['login', 'account'];

        var toggle = function(container, flag) {
            span = $('#' + container + 'Link').find('span');
            div = $('#' + container + 'Div');

            div[flag ? 'slideDown' : 'slideUp']();
            span.html(flag ? '-' : '+');
        };

        var clickHandler = function() {
            container = this.id.match(/^[a-z]*/);
            flag = $(this).find('span').html() == '+';
            toggle(container, flag);

            if (flag) {
                for (i = 0, j = containers.length; i < j; i++) {
                    con = containers[i];


                    if (con != container)
                        toggle(con, 0);
                }
            }
        };

        $(function() { // on load

            for (i = 0, j = containers.length; i < j; i++)
                $('#' + containers[i] + 'Link').click(clickHandler);

        });

    })(jQuery);

    //]]>
</script>

//And here are the divs:
<div id="loginDiv" style="display:none">...</div>
<div id="accountDiv" style="display: none;">...</div>

我尝试将loginDiv上的显示更改为除了之外的任何内容,但仍然无法正常工作。

2 个答案:

答案 0 :(得分:1)

您的<div>代码是否故意不关闭</div>代码?请务必关闭这些并尝试从display:none删除loginDiv

答案 1 :(得分:1)

您可以这样做:

http://jsfiddle.net/ufomammut66/Em64X/

基本上,页面初始化未显示的元素。当页面加载(即$function(){位)时,我们将登录元素css值'display'设置为块。和bam - 我们在页面加载时有一个可见元素。

我还在其中添加了一个快速的小切换按钮,一次只显示一个。我不是100%肯定你在那里尝试做什么,但看起来你正试图找到所有一个元素 - 添加一个点击事件来做它。这个只是对任何类型'hideAble'进行幻灯片切换,这两个类或div都有。

希望这有帮助。

编辑:在加载时添加了范围文本的更改。