How to revert dynamically assigned CSS properties?

Question

I have a typical navigation menu which displays submenu’s when you hover over the navigation node.

I have a button which when clicked will only display certain elements in the navigation node. I do so by dynamically editing the CSS properties as follows:

In the example below assume the navigation nodes are structured as follows:

Menu A     |    Menu B      |      Menu C

--------------------------------------------------

Submenu1     SubmenuB1       SubmenuC1 

                                                                                 ElementC1a

                                                                                 ElementC1b

Submenu2                                    SubmenuC2

The Submenu’s and any nodes below it will be displayed only if the user hovers over the corresponding Menu.

foo1Click : function () {

                document.getElmentById(“menuA”).style.display = “inline-block”;

                document.getElmentById(“submenuA1”).style.display = “none”;

                document.getElmentById(“submenuA2”).style.display = “inline-block”;

                document.getElmentById(“SubmenuB1”).style.display = “none”;

document.getElmentById(“SubmenuC”).style.display = “inline-block”;

document.getElmentById(“ElementC1a”).style.display = “inline-block”;

document.getElmentById(“ElementC1b”).style.display = “inline-block”;

document.getElmentById(“SubmenuC2”).style.display = “none”;

---

---

}

So foo1Click will display the navigation menu as follows:

Menu A     |      Menu C

--------------------------------------------------

Submenu2      SubmenuC1 

                                                     ElementC1a

                                                     ElementC1b

Now when I click “foo2Click” I wish to revert back to the original state where Submenu’s would display if hovered upon.

Any suggestions on how I can author foo2Click?

Thank You!

Answer 1

Not 100% certain i follow, but setting the ...style.display = "" clears the inline style, and reverts to what you have defined in your css.

But i have to say, this is not the cleanest way of doing it, best thing to do is apply a class (WinJS.Utilities.addClass can help you there) to some parent node, and let your css do the styling.

Answer 2

Thanks Andrew!