Expandable Menu (with Submenus) And Unique Highlighted Selection Of List Elements
I am trying to create a menu that contains a variety of sub lists (up to three levels). The idea is the user should be able to expand and contract all of the options at any time, b
Solution 1:
Your jQuery is a mess :)
Try this self explained code :
jQuery(document).ready( function() {
$('#Ul1, #Ul2, #Ul3').hide(); // HIDE THE UL(s)
$('#container1 > li').on('click', function() { // ON PARENT LI CLICK
$(this).addClass('selected').siblings().removeClass('selected'); // ADD A CLASS SELECTED
TO THE CLICKED LI AND REMOVE THIS CLASS FROM OTHER PARENT LI
$('.selected').children('ul').toggle(); // SHOW THE CHILDREN OF SELECTED
OR HIDE THEM BACK
$('.selected').siblings().children('ul').hide(); // HIDE THE UL CHILDREN OF THE OTHER PARENT LI (IN CASE ANOTHER PARENT LI IS CLICKED WHILE ONE HAS HIS CHILDREN OPENED)
$('.selected').children('span').css("background-color", "#FFFF00"); // THE SAN OF SELECTED HAS A YELLOW COLOR
$('.selected').siblings().children('span').css("background-color", ""); // THE SPAN OF THE SIBLIGNS OF SELECTED ARE/REMAINS WHITE
});
});
Of course, there are many ways to accomplish it, I'm just showing you the logic.
Hope this helps, SYA ;)
And this is a fiddle ;)
Post a Comment for "Expandable Menu (with Submenus) And Unique Highlighted Selection Of List Elements"