CODEWITHSUNDEEP
jquerymenuclicktoggle
user2212564
user2212564

Reputation: 261

Navigation won't toggle

I have a Navigation where two of the menu items have a dropdown sub-menus.

At the moment my jQuery you can click on these and toggle between the two to show them but i cant get them to click again and hide (they stay shown). I need them to toggle against each other AND toggle hide and show when clicked on and off.

I can't use an if else statement as I am using click event for mobile/touch devices. I have used an if else statement for the hover state for desktop devices and this works fine

JSFIDDLE

$(document).ready(function () {
      // click show sub menu
      $('ul.sub-menu').hide();
      $('#nav-1 li').click(function () {
          $('ul.sub-menu').hide();
          $(this).find('ul.sub-menu').show();
      });

});

Anyone got any ideas how to merge the two toggling features together?

Ive also tried .toggle(); but the issue still persists.

edit: link with show/hide and toggle being used: http://jsfiddle.net/LPrMy/6/

Upvotes: 0

Views: 220

Answers (2)

Michael Walter
Michael Walter

Reputation: 1477

You have a problem with the correct selector. Try this:

$('#nav-1 li').click(function () {
   $('ul.sub-menu').hide();
   $(this).children().next().toggle();
});

Updated fiddle: http://jsfiddle.net/LPrMy/9/

Upvotes: 1

Anthony Atkinson
Anthony Atkinson

Reputation: 3248

I think that your hide() function was somehow messing with the showing of items, and toggle is better in this scenario as well. Here you are :)

 $(document).ready(function () {
          // click show sub menu
          $('ul.sub-menu').hide();
          $('#nav-1 li').click(function () {
              $(this).siblings('li').find('ul.sub-menu').hide();
              $(this).find('ul.sub-menu').toggle();
          });

  });

http://jsfiddle.net/LPrMy/4/

Upvotes: 2

Related Questions