0

我有一个单页应用程序，当人们单击左侧的 jQuery UI 手风琴时，它会显示某些信息。如果我在页面的 CSS 中设置初始“显示：无”或调用 jQuery(selector).hide()，那么在那之后似乎无法显示，至少不使用 jQuery(selector).show()。调试语句确认它使用的选择器实际上是预期的，但没有显示。

我在做什么来抵消 jQuery 显示（） DIV 的能力？

TIA,

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
        <title>Anonymous</title>
        <link type='text/css' href='css/ui-lightness/jquery-ui-1.8.21.custom.css' rel='stylesheet' />
        <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
        <script type='text/javascript' src='js/jquery-ui-1.8.21.custom.min.js'></script>
        <script type='text/javascript'>

            var agency;
            var current_program;
            var permitted = Object();
            permitted['Anonymous1.User1'] = ['Program1'];
            permitted['Anonymous1.User2'] = ['Program1'];
            permitted['Anonymous1.User3'] = ['Program1', 'Program3'];
            permitted['Anonymous1.User4'] = ['Program1', 'Program2',
                'Program3'];
            permitted['Anonymous2'] = ['Program1'];
            permitted['Anonymous3'] = ['Program1'];
            permitted['Anonymous4'] = ['Program1', 'Program3', 'Program2'];
            permitted['Anonymous6'] = ['Program1', 'Program2', 'Program3',
                'Report5'];
            permitted['Anonymous5.Anonymous5r'] = ['Program1', 'Program2'];
            permitted['Anonymous5.User4'] = ['Program1', 'Program2',
                'Program3'];


            jQuery(function(){

                // Accordion
                jQuery('#accordion').accordion({ header: 'h3' });
                jQuery('.page').hide();

                jQuery('.login').click(function(event_object)
                    {
                    current_program = event_object.target.id;
                    current_program = current_program.replace('-', ' ');
                    jQuery('#login-form').show();
                    jQuery('#login-form h3').html(current_program);
                    });

                jQuery('#login-button').click(function(event_object)
                    {
                    jQuery('#login-form').hide();
                    agency = jQuery('#login-form h3').html();
                    var key = null;
                    if (jQuery.inArray(agency, permitted))
                        {
                        key = agency;
                        }
                    else if (jQuery.inArray(agency + '.' +
                        jQuery('#login-name').val()))
                        {
                        key = agency + '.' + jQuery('#login-name').val();
                        }
                    if (key)
                        {
                        var user_permissions = permitted[key];
                        if (user_permissions.length == 1)
                            {
                            load_page(user_permissions[0]);
                            }
                        else
                            {
                            load_blank_permissions_page();
                            for (var index = 0; index <
                                user_permissions.length; ++index)
                                {
                                display_link(user_permissions[index]);
                                }
                            }
                        }
                        return false;
                    });
                });
                function display_link(drilldown)
                    {
                    var html_id = drilldown.replace(' ', '-');
                    jQuery('#' + html_id).show();
                    }
                function load_blank_permissions_page()
                    {
                    jQuery('#links-page span').hide();
                    jQuery('#links-page h3').html(agency + ' Options');
                    jQuery('#links-page').css('display', 'block');
                    jQuery('#links-page').show();
                    }
                function load_page(drilldown)
                    {
                    var html_id = drilldown.replace(' ', '-');
                    jQuery('.page').hide();
                    jQuery('#' + html_id).show();
                    }
            </script>
            <style type='text/css'>
                body{ font-family: 'Verdana', sans-serif; margin: 50px;}
                div#accordion
                    {
                    float: left;
                    position: absolute;
                    width: 18%;
                    }
                div.page
                    {
                    margin-left: 20%;
                    }
            </style>
        </head>
        <body>
        <h1>Anonymous</h1>
            <div id='accordion'>
                <div>
                    <h3><a href='#'>Demo</a></h3>
                    <p>
                    <a class='login' id='Anonymous2' href='#'>Anonymous2</a><br />
                    <a class='login' id='Anonymous1' href='#'>Anonymous1</a><br />
                    <a class='login' id='Anonymous3' href='#'>Anonymous3</a><br />
                    <a class='login' id='Anonymous4' href='#'>Anonymous4</a><br />
                    <a class='login' id='Anonymous5' href='#'>Anonymous5</a><br />
                    </p>
                </div>
                <div>
                    <h3><a href='#'>Use Cases</a></h3>
                    <div>Phasellus mattis tincidunt nibh.</div>
                </div>
                <div>
                    <h3><a href='#'>Third</a></h3>
                    <div>Nam dui erat, auctor a, dignissim quis.</div>
                </div>
            </div>
            </div>

            <div class='page' id='login-form'>
                <h3>Log in</h3>
                <p><input id='login-name' type='text'> Username<br />
                <input id='password' type='password'> Password<br />
                <button id='login-button'>Log in</button></p>
            </div>

            <div class='page' id='links-page'>
                <h3>Options</h3>
                <p>
                <span id='Program1'><a href='#'
                id='Program1-link'>Report1</a><br /></span>
                <span id='Report5'><a href='#'
                id='Report5-link'>Report5</a><br /></span>
                <span id='Program2'><a href='#'
                id='Program2-link'>Report2</a><br /></span>
                <span id='Program3'><a href='#'
                id='Program3-link'>Report3</a><br />
                </span>

                </p>
            </div>

            <div class='page' id='Program4'>
                <h3>Program1</h3>
                <p>...</p>
            </div>

            <div class='page' id='Program1'>
                <h3>Program1</h3>
                <p>...</p>
            </div>

            <div class='page' id='Program2'>
                <h3>Program2</h3>
                <p>...</p>
            </div>

            <div class='page' id='Program3'>
                <h3>Program3</h3>
                <p>...</p>
            </div>


        </body>
</html>
4

0 回答 0