左側の jQuery UI アコーディオンをクリックしたときに特定の情報を表示するためのシングルページ アプリケーションがあります。ページの CSS で最初に「display: none」を設定するか、jQuery(selector).hide() を呼び出すと、少なくとも jQuery(selector).show() を使用しない限り、その時点以降は表示できないようです。デバッグステートメントは、使用しているセレクターが実際に意図したものであることを確認しますが、何も表示されません。
DIV を show() する jQuery の機能を中和するために、私は何をしていますか?
ティア、
<!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>