jQuery removeClass() bug
I have a page that contains HTML and jQuery. I built a top navbar in the main header. The question is: When I click the tabs one by one to the forward direction, every tabs' menu hides correctly and the other appears. But when I click to the inverse direction, every tabs' menu does not hide. This is the code of the page:
Note the div with ID user_tools, it has the top navbar which I talked about.
If you clicked the Requests button which is under the tr tag, the requests menu appears."
<div id="main_header" class="round">
<img id="logo_image" src="images/logo.png" />
<!-- <hr id="logo_splitter" /> -->
<!-- User tools -->
<div id="user_tools" class="round">
<table id="tabs">
<tr id="reuqests_tab" class="round tab" onclick="$('div#requests').show(); $(this).addClass('clicked');">
<td><img src="images/16x16/friend_request.gif" /> </td><td>Requests <b class="round counter" id="requests_counter">13</b></td>
<div id="requests">
<ul id="requests_menu">
<li id="req_loader" style="text-align: center;"><img src="images/16x16/loader.gif" /></li>
<li id="req_NUMBER">Request From Anonymous</li>
<li id="req_NUMBER">Request From Anonymous</li>
<li id="req_NUMBER">Request From Anonymous</li>
</ul>
</div>
</tr>
<tr id="inbox_tab" class="round tab" onclick="$('div#inbox').show(); $(this).addClass('clicked');">
<td><img src="css/images/icons/email.png" /> </td><td>Inbox <b class="round counter" id="inbox_counter">3</b></td>
<div id="inbox">
<ul id="inbox_menu">
<li id="req_loader" style="text-align: center;"><img src="images/16x16/loader.gif" /></li>
<li id="req_NUMBER">New message From Anonymous</li>
</ul>
</div>
</tr>
<tr id="notif_tab" class="round tab" onclick="$('div#notifications').show(); $(this).addClass('clicked');">
<td><img src="images/16x16/icy-earth-icon.png" /> </td><td>Notifications <b class="round counter" id="notif_counter">25</b></td>
<div id="notifications">
<ul id="notif_menu">
<li id="req_loader" style="text-align: center;"><img src="images/16x16/loader.gif" /></li>
<li id="req_NUMBER">Anonymous poked you</li>
<li id="req_NUMBER">Anonymous tagged you in a photo</li>
</ul>
</div>
</tr>
</table>
<script type="text/javascript">
$(document).click(function(event) {
if($(event.target).parents().index($('tr.clicked')) == -1) {
//var visible;
//var parent_tab;
if($('div#requests').is(":visible")){
$('div#requests').css('display', 'none');
$('tr#reuqests_tab').attr('class', 'round tab');
}else if($('div#inbox').is(":visible")){
$('div#inbox').css('display', 'none');
$('tr#inbox_tab').attr('class', 'round tab');
}else if($('div#notifications').is(":visible")){
$('div#notifications').css('display', 'none');
$('tr#notif_tab').attr('class', 'round tab');
}else{
// DO NOTHING
}
}
});
</script>
</div>
<div id="top_navbar">
<!-- SearchBox -->
<div id="searchbox">
<input type="text" id="search_field" />
<script type="text/javascript">
$(function(){
$("input#search_field").watermark('Search whole site');
$("input#search_field").bind('textchange', function(){
$("div#suggestions").fadeIn('fast');
});
$("input#search_field").bind('notext', function(){
$("div#suggestions").fadeOut('fast');
});
});
</script>
<div id="suggestions">
<table dir="ltr" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="40"><img src="images/logo.png" width="32" height="32"></td><td align="left" valign="middle"> ALOOOOO</td>
</tr>
</table>
</div>
</div>
<!-- MediaPlayer -->
<div id="small_mediaplayer" class="round small_mediaplayer">
<object id="mp3_flash_player" type="application/x-shockwave-flash" data="java_script/mp3_player/player_mp3.swf" width="200" height="20">
<param name="movie" value="java_script/mp3_player/player_mp3.swf" />
<param name="bgcolor" value="#0099CC" />
<param name="FlashVars" value="mp3=MP3_SOURCE&bgcolor1=c9c9c9&bgcolor2=a1a1a1" />
<param NAME="wmode" VALUE="transparent">
</object>
<script type="text/javascript">
$(function(){
开发者_运维技巧 $("div#small_mediaplayer").mouseover(function(){
if($.browser.msie){
$("div#small_mediaplayer div#option1").show();
}else{
$("div#small_mediaplayer div#options").show();
}
});
$("div#small_mediaplayer").mouseout(function(){
if($.browser.msie){
if($("ul#mediaplayer_sub_options").css('display') == 'none'){
if($("div#small_mediaplayer div#option1").length > 0){
$("div#small_mediaplayer div#option1").css('display', 'none');
}
}
}else{
if($("ul#mediaplayer_sub_options").css('display') == 'none'){
if($("div#small_mediaplayer div#options").length > 0){
$("div#small_mediaplayer div#options").css('display', 'none');
}
}
}
});
$(document).click(function(event) {
if($.browser.msie){
if($(event.target).parents().index($('div#option1')) == -1) {
if($('ul#mediaplayer_sub_options').is(":visible")) {
$("ul#mediaplayer_sub_options").css('display', 'none');
$('div#option1').hide();
}
}
}else{
if($(event.target).parents().index($('div#options')) == -1) {
if($('div#options').is(":visible")) {
$("ul#mediaplayer_sub_options").css('display', 'none');
$('div#options').hide();
}
}
}
});
$(document).click(function(event) {
if($(event.target).parents().index($('li#register_tab')) == -1) {
if($('div#mini_register_dialogue').is(":visible")) {
$("div#mini_register_dialogue").css('display', 'none');
$('li#register_tab').removeClass('li_clicked');
if($.browser.msie){
$('li#register_tab').css('background', 'none');
}
}
}
});
});
</script>
<!-- IE fixed bug -->
<?php if($ua['name'] !== 'Internet Explorer'){ ?>
<div id="options">
<?php } ?>
<div id="option1" title="Mp3 PLayer Options" class="option round" onclick="show_sub_menu()"></div>
<ul id="mediaplayer_sub_options" class="round">
<li><a href="#"><img src="images/16x16/arrow_circle_225.png" width="13" height="13" /> Change Music</a></li>
<li><a href="#"><img src="images/16x16/cross_circle.png" width="13" height="13" /> Close Player</a></li>
</ul>
<?php if($ua['name'] !== 'Internet Explorer'){ ?>
</div>
<?php } ?>
<script type="text/javascript">
$(document).ready(function(){
//create a bubble popup for each DOM element with class attribute as "text", "button" or "link" and LI, P, IMG elements.
$('#small_mediaplayer').CreateBubblePopup({
position : 'top',
align : 'center',
innerHtml: 'Random Mp3 song ! Renewd daily !',
innerHtmlStyle: {
color:'#FFFFFF',
'text-align':'center'
},
themeName: 'all-black',
themePath: 'java_script/popup/jquerybubblepopup-theme'
});
});
</script>
</div>
</div>
<ul id="header_menu">
<li style="padding-right: 3px; padding-left: 10px;">
<img src="images/16x16/news_feed.png" /> <a href="#">News Feed</a>
</li>
<li style="padding-right: 3px; padding-left: 10px;">
<img src="images/16x16/my-profile.png" />
<a href="#" onmouseover="return showhide('submenu3');" onmouseout="return hide_item('submenu3', true);">My Profile</a>
<span id="submenu3" class="main_header_submenu round" onmouseover="show_submenu(this);" onmouseout="return hide_item('submenu3', true);">
<p class="submenu_options"><a href="#">Change my name</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Change my password</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Change my picture</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Change my status</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Add new photo</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Add new video</a></p>
</span>
</li>
<li style="padding-right: 3px; padding-left: 10px;">
<img src="images/16x16/members-list.png" />
<a href="#" onmouseover="return showhide('submenu2');" onmouseout="return hide_item('submenu2', true);">Members</a>
<span id="submenu2" class="main_header_submenu round" onmouseover="show_submenu(this);" onmouseout="return hide_item('submenu2', true);">
<p class="submenu_options"><a href="#">Search for member</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Block member</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Add a friend</a></p>
</span>
</li>
<li style="padding-right: 3px; padding-left: 10px;">
<img src="images/16x16/On-off-icon.png" />
<a href="#" onmouseover="return showhide('submenu1');" onmouseout="return hide_item('submenu1', true);">Login</a>
<span id="submenu1" class="main_header_submenu round" onmouseover="show_submenu(this);" onmouseout="return hide_item('submenu1', true);">
<p class="submenu_options"><a href="#">Login to your account</a></p>
<hr noshade color="#C0C0C0" />
<p class="submenu_options"><a href="#">Forget your password</a></p>
</span>
</li>
<li id="register_tab" class="round" style="padding-right: 3px; padding-left: 10px;" onclick="change_header_menu_bg(this); show_mini_reg_dialogue();">
<img src="images/16x16/icon_register.png" /> <a href="#">Register</a>
<div id="mini_register_dialogue" class="round">
<form id="mini_reg_form" onsubmit="return false;">
<label for="mini_reg_username">User name: </label><input type="text" id="mini_reg_username" name="mini_reg_username" class="mini_reg_field" onchange="$('#check_username_btn').removeAttr('disabled'); $('#check_username_btn').addClass('uibutton'); $('#check_username_btn').text('Check availability');" /><br />
<button id="check_username_btn" class="uibutton special">Check availability</button><br />
<label for="mini_reg_password">Password: </label><input type="password" id="mini_reg_password" name="mini_reg_password" class="mini_reg_field" /><br />
<label for="mini_reg_repeatpass">Password again: </label><input type="password" id="mini_reg_repeatpass" name="mini_reg_repeatpass" class="mini_reg_field" /><br />
<label for="mini_reg_email">E-mail: </label><input type="text" id="mini_reg_email" name="mini_reg_email" class="mini_reg_field" /><br />
<label for="mini_reg_repeatemail">E-mail again: </label><input type="text" id="mini_reg_repeatemail" name="mini_reg_repeatemail" class="mini_reg_field" /><br />
<input type="submit" id="mini_reg_submit" name="mini_reg_submit" value="Submit" />
<br />
<span id="error_mini_reg"></span>
</form>
<script type="text/javascript">
$(function(){
$("form#mini_reg_form").validate({
rules:
{
mini_reg_username: { required: true, minlength: 3 },
mini_reg_password: { required: true, minlength: 3 },
mini_reg_repeatpass: { required: true, equalTo: "#mini_reg_password" },
mini_reg_email: { required: true, email: true },
mini_reg_repeatemail: { required: true, equalTo: "#mini_reg_email" },
}
});
$("form#mini_reg_form").submit(function(){
return false;
});
$("#check_username_btn").click(function(){
var username = $("input#mini_reg_username").val();
$(this).html('<img width="14" height="14" src="images/16x16/loader.gif" /> Checking ...');
$(this).removeClass('uibutton');
$(this).attr('disabled', 'disabled');
$.ajax({
type: "POST",
url: "functions/check_username.php",
data: "username="+username,
cache: false,
success: function(data){
if(data == '1'){
$("#check_username_btn").text('Available');
$("#check_username_btn").attr('disabled', 'disabled');
}else{
$("#check_username_btn").addClass('uibutton');
$("#check_username_btn").text('Not Available !');
setTimeout(function(){$("#check_username_btn").text('Check availability');
$("#check_username_btn").removeAttr('disabled');
},3000);
}
}
});
return false;
});
});
</script>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#main_header").center();
});
function showhide(item){
$(function(){
$("#"+item).show();
});
}
function hide_item(item, hide){
if(hide==true){
hide_item_timer = setTimeout(function(){$("#"+item).hide()}, 400);
}
}
function show_submenu(item){
clearTimeout(hide_item_timer);
}
function show_sub_menu()
{
$(function(){
$('ul#mediaplayer_sub_options').show();
/* IE fixed bug */
if($.browser.msie){
$('div#mediaplayer_sub_options_div').show();
}
});
}
function change_header_menu_bg(item)
{
$(function(){
$(item).addClass('li_clicked');
if($.browser.msie){
$(item).css('background', '#0099CC');
}
});
}
function show_mini_reg_dialogue()
{
$(function(){
$("div#mini_register_dialogue").show();
});
}
</script>
加载中,请稍侯......
精彩评论