0

I'm further along in making this all work, but when I try to add some code that hides the others when one is clicked it expects a second click to hide again. How do I only show one menu at a time? PS These are not sibling menus.

$(function() {
  $("a[rel=tooltip]").tooltip({ position:"bottom" });
  $(".dd").toggle(function() {
      $("ul", this).show();
      $(this).addClass("on");
      $("ul a", this).click(function(e) {
         e.stopPropagation();
      });
      if $(".button1").click() {
        $("#contextMenu2, #contextMenu3").hide();
      };
      if $(".button2").click() {
        $("#contextMenu1, #contextMenu3").hide();
      };
      if $(".button3").click() {
        $("#contextMenu1, #contextMenu2").hide();
      };
    }, 
    function() { $("ul", this).hide(); $(this).removeClass('on'); }
  );
});
Stephen Way
  • 668
  • 3
  • 7
  • 20
  • There are some pretty major typos in your code that probably need to be resolved before anyone can address your question... There is no way that "if $('.button1').click() { stuff; }" will compile and I can't tell if you want the condition there, or if you are assigning or triggering the click handler... – Prestaul Sep 20 '10 at 20:09

1 Answers1

0

I got this to work how I wanted it. Thanks to this thread jQuery Toggle State

  $(".dd").click(function() {
    $("ul", ".dd").not(this).hide();
    $("ul", this).toggle();
  });
  $(".wrapper").click(function() {
    $("ul", ".dd").hide();
  });
Community
  • 1
  • 1
Stephen Way
  • 668
  • 3
  • 7
  • 20