jQuery/Javascript scope, maybe variable scope conflict

Question

I am trying to code a menu bar for my site in JS - the problem I'm having is that I am using a variable as a 'which category is unfolded' switch, and it does not seem to register. Firebug seems to tell me it's not defined, and or stays zero.

var navOpen = 0;

$(function() {

///////////bunch of other functions here

//When designWork is clicked
          $(".designwork").click(function(){  

              switch(navOpen)
              {
                case 0:
                    $(".navsub:hidden",this).slideDown("slow");
                    navOpen = 1; break;
                case 1:
                    break;
                case 2:
                    $("div.artProjects .navsub").slideUp("fast");
                    $(".navsub:hidden",this).slideDown("slow");
                    navOpen = 1; break;
                default:
                    break;
              }
              });

//When artProjects is clicked
          $(".artprojects").click(function(){

              switch(navOpen)
              {
                case 0:
                    $(".navsub:hidden",this).slideDown("slow");
                    navOpen = 2; break;
                case 1:
                    $("div.designWork .navsub").slideUp("fast");
                    $(".navsub:hidden",this).slideDown("slow");
                    navOpen = 2; break;
                case 2:
                    break;
                default:
                    break;
              }
              });    

       });

For a reason that is probably obvious, but I'm not seeing it, both menus open when clicked in the manner they should, but they do not close the other menu... help me out here, what am I missing?

does the live example help? playarmada.com is the site, and playarmada.com/extjs is the js — user1002617
– user1002617, Commented Oct 19, 2011 at 7:28

Manuel van Rijn · Accepted Answer · 2011-10-19 07:41:43Z

0

$("div.designWork .navsub") should be $("div.designwork .navsub")

and

$("div.artProjects .navsub") should be $("div.artProjects .navsub")

capitals ...

answered Oct 19, 2011 at 7:41

Manuel van Rijn

10.3k1 gold badge33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pieter · Accepted Answer · 2011-10-19 07:35:46Z

0

Well, I think it has to do with the fact that in both cases you refer to ".navsub:hidden" without specifying precisely which navsub you really mean. You probably want to add either div.designWork or div.artProjects in front of it to specify which menu should slidedown.

answered Oct 19, 2011 at 7:35

Pieter

3,3975 gold badges34 silver badges69 bronze badges

2 Comments

user1002617 Over a year ago

the problem is that those lines trigger fine, it's the ones like this that don't: _____ $("div.artProjects .navsub").slideUp("fast"); _____ which is what you seem to be saying to do. the slide down works, the slide up does not - but i think it's because for whatever reason, navOpen is not being set or read correctly, and the switch statement always sees it as zero

Pieter Over a year ago

Ah, right now I understand what you mean. But I don't think you would need that variable if you add the selectors. In that case, you can exactly specify which menu should slidedown and which slideup. And if you step through the code in Firebug, do you see the variable being set? Or does it stay '0' even in that case?

Collectives™ on Stack Overflow

jQuery/Javascript scope, maybe variable scope conflict

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related