CODEWITHSUNDEEP
jqueryjquery-uimenusubmenu
Jay Rizzi
Jay Rizzi

Reputation: 4304

Onclick show submenu but hide other submenu(s)

I am using jQuery UI menu widget to have header navigation on my pages

here is a mock up http://jsfiddle.net/ctL6T/1/

My issue is i want to close any other shown submenus if another main menu is clicked, you can see in my fiddle if you click one main stub, the submenu stays open if you click another main stub

i thought by using an $.each on the click event, i could by using the same code that toggles iterate through the elements and flip them back and forth, but this opens the opposite menu

        $('.has-sub').on('click', function(){
            $('#mainmenu li').each(function () {
                $(".submenu" ).toggle();
            });
            $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
            return false;
         });

and this is just a mess

 $('.has-sub').on('click', function(){
$('#mainmenu li').each(function () {
  $(".submenu" ).toggle();
  $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
});
return false;
 });

as always any help is appreciated

*due to flashing of unstyled content, i decided to have the main menu as static html using some jquery ui theme classes, it should not effect the functionality of what im asking

Upvotes: 1

Views: 5755

Answers (2)

kyle.stearns
kyle.stearns

Reputation: 2346

My solution was to trigger an event when you click any of the <a> elements within the navigation. When you click on one of the <a> elements within #mainmenu all elements with a class of submenu will be hidden. Also, any elements with a class of ui-state-active will have the ui-state-active class removed.

Here's what I added to make it all work!

$('#mainmenu a').on('click', function(){
    $('.submenu').hide();
    $('.ui-state-active').removeClass('ui-state-active');
});

And here's a fiddle! http://jsfiddle.net/ctL6T/5/

REVISED VERSION

I added in some additional logic to ensure that when you click a link it will close out the drop-down menus. If you click on a link within a drop-down it will close the drop-down navigation and remove the active state. Also, if you click on the home link it will close the drop-down navigation and remove the active state.

This should help ya out!

Fiddles: http://jsfiddle.net/ctL6T/8/

Upvotes: 2

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Try this:

$(function() {

            $( ".submenu" ).menu({
                position: {at: "left bottom"},
                icons: { submenu: "ui-icon-triangle-1-s" }
            });
            $('.has-sub').on('click', function(){
                $(this).next(".submenu").toggle();
                $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
                $('.has-sub').not($(this)).each(function(){
                   $(this).next(".submenu").hide();
                    $(this).removeClass('ui-state-active');
                });
                return false;
                });     
});

jsFiddle: http://jsfiddle.net/ctL6T/6/

Upvotes: 3

Related Questions