jQuery toggle function not working as expected
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('div#menu div')
.bind('mouseover',function(event){
popHelp(this);
})
.bind('mouseout',function(event){
clearHelp();
})
.toggle(
function(event){$('#menu div a').not(this).css('opacity',1);$(event.target).css('opacity',0.4)},
function(event){$(event.target).css('opacity',1)}
)
$('div.item').not('#mainPage')
.hide()
$('#customerManagement').click(function(event){
$('.item').hide('slow');
$('#customerManagementCon').toggle('slow');
return false;
})
$('#userManagement').click(function(){
$('.item').hide('slow');
$('#userManagementCon').toggle('slow');
return false;
})
$('#storageManagement').click(function(){
$('.item').hide('slow');
$('#storageManagementCon').toggle('slow');
return false;
})
$('#searchManagement').click(function(){
$('.item').hide('slow');
$('#searchManagementCon').toggle('slow');
return false;
})
$('#signOff').click(function(){
$('.item').hide('slow');
$('#signOffCon').toggle('slow');
return false;
})
}
);
function popHelp(ref){
var text;
if(ref.id=="customerManagement")
text="click here for customer management";
else if(ref.id=="userManagement")
text="click here for user management";
else if(ref.id=="storageManagement")
text="click here for storage management";
else if(ref.id=="searchManagement")
text="search management";
else if(ref.id=="signOff")
text="click here to sign off";
$('#help开发者_StackOverflow社区Console').append('<div class="help">'+text+'<div>');
}
function clearHelp(){
$('#helpConsole > div').remove();
}
</script>
<style type="text/css" >
#helpConsole
{
background-color:Aqua;
margin-left:500px;
width:300px;
height:100px;
outline-width:medium;
}
</style>
</head>
<body>
<div id="menu">
<table border="2">
<thead>
<tr>
<th colspan="5">Welcome $Employee Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><div id="customerManagement" class="menuItem"><a>Customer Management</a></div></td>
<td><div id="userManagement" class="menuItem"><a>User Management</a></div></td>
<td><div id="storageManagement" class="menuItem"><a>Storage Management</a></div></td>
<td><div id="searchManagement" class="menuItem"><a>Search Management</a></div></td>
<td><div id="signOff" class="menuItem"><a>Sign Off</a></div></td>
</tr>
</tbody>
</table>
</div>
<div id="helpConsole"><h3>help</h3></div>
<div id="mainPage" class="item"><h1>Storage Service</h1></div>
<div id="customerManagementCon" class="item">
<h3>Customer Management</h3>
</div>
<div id="userManagementCon" class="item">
<h3>User Management</h3>
</div>
<div id="storageManagementCon" class="item">
<h3>Storage Management</h3>
</div>
<div id="searchManagementCon" class="item">
<h3>Search Mangement</h3>
</div>
<div id="signOffCon" class="item">
<h3>Sign Off</h3>
</div>
<div id="menuItemCon" class="item">menuItem</div>
</body>
The toggle function in this code is not working as expected though it shows the #menu items when clicked it doesn't hide them always .
You are fading the <div> out but referencing the <a> on the toggle, you need to fade the <div> back in, like this:
This: $('#menu div a').not(this)
Needs to be: $('#menu div').not(this)
This will bring the correct faded elements back like you want. Here's an updated sample with some other tweaks to slim it down as well.
加载中,请稍侯......
精彩评论