jQuery problems.

change classes and .load

[xboxingman]

I am working on a navigation. Some of it works great and some does things it shouldn't. This is a time sensitive project so any help as soon as possible would be greatly appreciated. I will be continuing to work on it in hopes to clean the code down to something that works and post any updates I make.

What is happening is I have a side menu, when a link is clicked another menu slides out underneath and one more when a link is clicked on that list. the problem is the classes don't change properly and sometimes the pages don't even load.

I believe this code is more then I need but it's what I had to do to get it right. When you click a link the class changes. It works fine on the m1 & m3 but on m2 where it could be either class a or b depending if there is a menu3, the pages() function, it doesn't load the new class on this, but if you click another link on the menu it loads the class that should have been on the previous link on the current link. I hope that makes sense.


HEAD JAVASCRIPT:

<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>
$(document).ready(function() {
$(".m_item").click(function () {
$(".menu2").show("slide", { direction: "left" }, 500);
$(".menu2").removeClass("menu2 hide").addClass("menu2");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_active");
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item"); $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item"); $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
});
$(".m3_item").click(function () { $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass("m3_item").addClass("m3_item_active");
});
});
function loadPage(divID, pagetoload){
$('#' + divID).hide().load(pagetoload, function() {
$(this).show(100);
}); };

/* FROM HERE ON IS WHERE THE MALFUNCTIONING CODE IS */

function pages(amount){
if(amount>2) {
$(".menu3").show("slide", { direction: "left" }, 500);
$(".menu3").removeClass("menu3 hide").addClass("menu3");
$(".m2_item").click(function () {
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item"); $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item"); $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass().addClass("m2_item_activeb");
});
}else if(amount<2) {
$(".menu3").addClass("hide");
$(".m2_item").click(function () {
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item"); $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item"); $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass().addClass("m2_item_active");
});
}
};
</script>

BODY:

<div class="menu1">LOGO HERE
<div id="m1_1" class="m_item"><span class="m1n">01.</span> <a id="main1" href="javascript:loadPage('contentDiv','content/blank.html');">Main 1</a></div>
<div id="m1_2" class="m_item"><span class="m1n">02.</span> <a id="main2" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a></div>
<div id="m1_5" class="m_item"><span class="m1n">03.</span> <a id="main3" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a></div>
<div id="m1_6" class="m_item"><span class="m1n">04.</span> <a id="main4" href="javascript:loadPage('contentDiv','content/blank.html');">Main 4</a></div>
<div id="m1_8" class="m_item"><span class="m1n">05.</span> <a id="main5" href="javascript:loadPage('contentDiv','content/blank.html');">Main 5</a></div>
<div class="footer">© 2012 Dream Huge Design</div>
</div><!--menu level 1-->
<div class="menu2 hide">
<div class="topbox"></div>
<div id="m2_2_1" class="m2_item"><a id="m2_sub1" href="javascript:loadPage('contentDiv','content/page1.html'); pages(1);"><span class="link2">Link 1</span></a></div>
<div id="m2_2_2" class="m2_item"><a id="m2_sub2" href="javascript:loadPage('contentDiv','content/page2.html'); pages(1);"><span class="link2">Link 2</span></a></div>
<div id="m2_2_3" class="m2_item"><a id="m2_sub3" href="javascript:loadPage('contentDiv','content/page3.html'); pages(3);"><span class="link2">Link 3</span></a></div>
<div id="m2_2_4" class="m2_item"><a id="m2_sub4" href="javascript:loadPage('contentDiv','content/page4.html'); pages(3);"><span class="link2">Link 4</span></a></div>
</div><!--menu level 2-->
<div class="menu3 hide">
<div class="topbox"></div>
<div id="m2_3_1" class="m3_item"><a id="m3_sub1" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link A</span></a></div>
<div id="m2_3_2" class="m3_item"><a id="m3_sub2" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link B</span></a></div>
<div id="m2_3_3" class="m3_item"><a id="m3_sub3" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link C</span></a></div>
<div id="m2_3_4" class="m3_item"><a id="m3_sub4" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link D</span></a></div>
</div><!--menu level 3-->

<div id="contentDiv"></div>

Thank you very much,
Mike

[xboxingman]

I have changed the javascript up some.

$(document).ready(function() {
$(".m_item").click(function () {
var currentId = $(this).attr('id');
if(currentId != "m1_3") {
$(".menu2").show("slide", { direction: "left" }, 500);
$(".menu2").removeClass("menu2 hide").addClass("menu2");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_active");
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
} else if(currentId == "m1_3") {
$(".menu2").hide("slide", { direction: "left" }, 100);
$(".menu2").addClass("hide");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_activeb");
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
}
});
$(".m3_item").click(function () {
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass("m3_item").addClass("m3_item_active");
});
$(".m2_item").click(function () {
var currentId = $(this).attr('id');
if(currentId != "m2_2_2") {
$(".menu3").show("slide", { direction: "left" }, 500);
$(".menu3").removeClass("menu3 hide").addClass("menu3");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(this).removeClass("m2_item").addClass("m2_item_active");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");;
} else if(currentId == "m2_2_2") {
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".menu3").addClass("hide");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(this).removeClass("m2_item").addClass("m2_item_activeb");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
}
});

});
function loadPage(divID, pagetoload){
$('#' + divID).hide().load(pagetoload, function() {
$(this).show(100);
}); };

I removed the pages() function, the first function for m_item works flawlessly, however, the same function for m2_item doesn't work at all. The div doesn't show as instructed and none of the classes change. Is there an error in my syntax somewhere?
thank you,
Mike

[xboxingman]

I could really use some help if anyone is able to point me in the right path to finding a solution to this.

THANK YOU

[Fotiman]

I suspect you've not gotten any replies yet for 2 reasons:
1. The code is not easy to read as you've put it in the forum
2. The code is hard to follow along with

To help you out, I'm posting your original code and your revised code, but I've run it through jsbeautifier [jsbeautifier.org], and I've wrapped it in quote/pre/code forum tags to preserve indentation, etc. Hopefully, that will make it easier for someone to help.

Original Script:

$(document).ready(function () {
  $(".m_item").click(function () {
    $(".menu2").show("slide", {
      direction: "left"
    }, 500);
    $(".menu2").removeClass("menu2 hide").addClass("menu2");
    $(".m_item_active").removeClass("m_item_active").addClass("m_item");
    $(this).removeClass("m_item").addClass("m_item_active");
    $(".menu3").hide("slide", {
      direction: "left"
    }, 100);
    $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
    $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
    $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
  });
  $(".m3_item").click(function () {
    $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
    $(this).removeClass("m3_item").addClass("m3_item_active");
  });
});

function loadPage(divID, pagetoload) {
  $('#' + divID).hide().load(pagetoload, function () {
    $(this).show(100);
  });
};

/* FROM HERE ON IS WHERE THE MALFUNCTIONING CODE IS */

function pages(amount) {
  if (amount > 2) {
    $(".menu3").show("slide", {
      direction: "left"
    }, 500);
    $(".menu3").removeClass("menu3 hide").addClass("menu3");
    $(".m2_item").click(function () {
      $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
      $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
      $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
      $(this).removeClass().addClass("m2_item_activeb");
    });
  } else if (amount < 2) {
    $(".menu3").addClass("hide");
    $(".m2_item").click(function () {
      $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
      $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
      $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
      $(this).removeClass().addClass("m2_item_active");
    });
  }
};

Original Markup:

<div class="menu1">LOGO HERE 
<div id="m1_1" class="m_item">
<span class="m1n">01.</span> <a id="main1" href="javascript:loadPage('contentDiv','content/blank.html');">Main 1</a>
</div> 
<div id="m1_2" class="m_item">
<span class="m1n">02.</span> <a id="main2" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a>
</div> 
<div id="m1_5" class="m_item">
<span class="m1n">03.</span> <a id="main3" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a>
</div> 
<div id="m1_6" class="m_item">
<span class="m1n">04.</span> <a id="main4" href="javascript:loadPage('contentDiv','content/blank.html');">Main 4</a>
</div> 
<div id="m1_8" class="m_item">
<span class="m1n">05.</span> <a id="main5" href="javascript:loadPage('contentDiv','content/blank.html');">Main 5</a>
</div> 
<div class="footer">© 2012 Dream Huge Design</div> 
</div><!--menu level 1--> 
<div class="menu2 hide"> 
<div class="topbox"></div> 
<div id="m2_2_1" class="m2_item">
<a id="m2_sub1" href="javascript:loadPage('contentDiv','content/page1.html'); pages(1);"><span class="link2">Link 1</span></a>
</div> 
<div id="m2_2_2" class="m2_item">
<a id="m2_sub2" href="javascript:loadPage('contentDiv','content/page2.html'); pages(1);"><span class="link2">Link 2</span></a>
</div> 
<div id="m2_2_3" class="m2_item">
<a id="m2_sub3" href="javascript:loadPage('contentDiv','content/page3.html'); pages(3);"><span class="link2">Link 3</span></a>
</div> 
<div id="m2_2_4" class="m2_item">
<a id="m2_sub4" href="javascript:loadPage('contentDiv','content/page4.html'); pages(3);"><span class="link2">Link 4</span></a>
</div> 
</div><!--menu level 2--> 
<div class="menu3 hide"> 
<div class="topbox"></div> 
<div id="m2_3_1" class="m3_item">
<a id="m3_sub1" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link A</span></a>
</div> 
<div id="m2_3_2" class="m3_item">
<a id="m3_sub2" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link B</span></a>
</div> 
<div id="m2_3_3" class="m3_item">
<a id="m3_sub3" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link C</span></a>
</div> 
<div id="m2_3_4" class="m3_item">
<a id="m3_sub4" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link D</span></a>
</div> 
</div><!--menu level 3--> 

<div id="contentDiv"></div> 

Revised JavaScript:

$(document).ready(function () {
  $(".m_item").click(function () {
    var currentId = $(this).attr('id');
    if (currentId != "m1_3") {
      $(".menu2").show("slide", {
        direction: "left"
      }, 500);
      $(".menu2").removeClass("menu2 hide").addClass("menu2");
      $(".m_item_active").removeClass("m_item_active").addClass("m_item");
      $(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
      $(this).removeClass("m_item").addClass("m_item_active");
      $(".menu3").hide("slide", {
        direction: "left"
      }, 100);
      $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
      $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
      $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
    } else if (currentId == "m1_3") {
      $(".menu2").hide("slide", {
        direction: "left"
      }, 100);
      $(".menu2").addClass("hide");
      $(".m_item_active").removeClass("m_item_active").addClass("m_item");
      $(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
      $(this).removeClass("m_item").addClass("m_item_activeb");
      $(".menu3").hide("slide", {
        direction: "left"
      }, 100);
      $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
      $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
      $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
    }
  });
  $(".m3_item").click(function () {
    $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
    $(this).removeClass("m3_item").addClass("m3_item_active");
  });
  $(".m2_item").click(function () {
    var currentId = $(this).attr('id');
    if (currentId != "m2_2_2") {
      $(".menu3").show("slide", {
        direction: "left"
      }, 500);
      $(".menu3").removeClass("menu3 hide").addClass("menu3");
      $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
      $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
      $(this).removeClass("m2_item").addClass("m2_item_active");
      $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");;
    } else if (currentId == "m2_2_2") {
      $(".menu3").hide("slide", {
        direction: "left"
      }, 100);
      $(".menu3").addClass("hide");
      $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
      $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
      $(this).removeClass("m2_item").addClass("m2_item_activeb");
      $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
    }
  });

});

function loadPage(divID, pagetoload) {
  $('#' + divID).hide().load(pagetoload, function () {
    $(this).show(100);
  });
};

[Fotiman]

For some reason, the formatting is getting lost on the HTML portion. :(

[Fotiman]

Side note, menus are usually best represented as unordered lists (<ul>/<li>) as opposed to the generic, non-semantic <div>.

[daveVk]

$(".menu3").removeClass("menu3 hide").addClass("menu3");

reduces to

$(".menu3").removeClass("hide");

in the same if/else block a lot of code is the same in both part, move common code out of if/else.

using toggleClass instead of addClass and removeClass will reveal more common code eg

$(".menu3").toggleClass("hide");

Indenting helps but hard to follow logic.