In the previous post, I showed how to use jQuery to hide items in the Left Navigation in SharePoint 2010. We also had a requirement to highlight the currently selected menu item. If the selected item was under one of the heading elements, it would be collapsed by default when the page loads because of our script. We needed a way to open only the section of the menu that contained the selected item.
This turns out to be a simple line of code added to the end of the previous script.
- $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().css("display", "block");
This code looks for the parent of any ‘li’ elements using the ‘selected’ class. SharePoint handles setting the ‘selected’ class on the appropriate ‘li’ item in the navigation. If we have any matches on our page, it will set the display property to ‘block’. The parent of the ‘li’ item is the heading element, so it undoes the hiding we did at the beginning of the script, but only for this element.
