CODEWITHSUNDEEP
javascriptjquerymenu
user642523
user642523

Reputation: 151

Jquery menu - toggle problem

To see what is the trouble see code on jsFiddle.Is there a way to set list with class "menutop" to act like "toogle" class (+), in other words when click Posts, pages and so on submenu is revealed.

Second thing that bothers me is how to set menu to behave in way that when one submenu is opened, and user click some other submenu, the previous opened to be closed automatical.

Upvotes: 2

Views: 704

Answers (2)

Nicolás
Nicolás

Reputation: 143

I named the function in the toogle handler and called it from menutop setting the toggle class element as "this" so it looks more familiar to you.

I just added a line that ensures that only one section could be open at a time

function hitMe(){
   if ($(this) .hasClass('toggle-open')) {
     $(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);
     $(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
   }else{
     $(".toggle-open").parent().click();//closes the previously opened menu
     $(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
     $(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('–') .parents('li') .children('ul') .slideDown(250);
 }
}

$(".menutop").click(function(){
     hitMe.apply(
         $(this).find(".toggle")
     );
}
);

Upvotes: 1

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

Here's a revision. Added a close all function and then I also added a click handler for the menu-top class that does essentially the same thing to expand the tabs. Hope it helps!

Upvotes: 1

Related Questions