Opened a dropdown navigation, but can't close it (jQuery)

I've made a drop down navigation using Jquery and css. When you click a specific button it opens, but I can't get it to close when that button get's clicked again. Here is the code I'm using (I've created a "Close" button for closing it but want it to get closed when you click on the same button you did for opening)

Jquery:

        $("#shadow").css("height", $(document).height()).hide();

  $(".menubutton").click(function () {
    $(".thetopmenu").css("padding","0px");
    $(".thetopmenu").css("display","block"); // Displayes the menu
    $(this).addClass("active"); // Add "active" class to selected tab
    $("#shadow").toggle();
  });

  $(".close").click(function () {
    $(".thetopmenu").css("display","none");
    $(".menubutton").removeClass("active");
    $("#overlay").css("display","none"); // Removes "active" class to selected tab
    $("#shadow").toggle();
  });

CSS:

        .menubutton {
  开发者_如何学编程      margin: 0; padding: 6px 0 0 0;
        background: url(images/menu.png) no-repeat left top;
        width: 44px; height: 16px;
        position: absolute;
        right: 10px;
        top: 20px;
        text-align: center;
        display: block;
        text-transform: uppercase;
        color: #c3c3c3;
        text-shadow: 0px -1px 0px #4f4f4f;
        font-family: MPSemibold, Arial;
        font-size: 10px;
        text-decoration: none; 
    }

    .menubutton:link {
        text-transform: uppercase;
        color: #c3c3c3;
        text-shadow: 0px -1px 0px #4f4f4f;
        font-family: MPSemibold, Arial;
        font-size: 10px;
        text-decoration: none;
    }


    .menubutton:active, .menubutton.active, menubutton:hover {
        background: url(images/menuh.png) no-repeat left top;
        color: #fff;
    }       

    .thetopmenu { 
        display: none;
        position: absolute;
        left: 0;
        z-index: 999;
        top: 61px;
        width: 100%;
    }

HTML:

<a href="#" class="menubutton"><span>Menu</span></a>
            <div class="thetopmenu">
                <ul id="content">
                <li><a href="ladies.php">Ladies' Collection</a></li>
                <li><a href="gents.php">Gents' Collection</a></li>
                <li><a href="store.php">Store Locator</a></li>
                <li><a href="#" class="close">Close</a></li>
                </ul>
            </div>

The #shadow just fades out the rest of the screen and leaves only the menu normal. I think it's quite simple but I'm not that good in jQuery.

Thank you

Shouldn't you do something like:

 $(".menubutton").click(function () {
   if($(this).css("display") == 'none')
   {
    $(".thetopmenu").css("padding","0px");
    $(".thetopmenu").css("display","block"); // Displayes the menu
    $(this).addClass("active"); // Add "active" class to selected tab
    $("#shadow").toggle();
   }
   else
   {
    $(".thetopmenu").css("display","none");
    $(".menubutton").removeClass("active");
    $("#overlay").css("display","none"); // Removes "active" class to selected tab
    $("#shadow").toggle();
   }
  });

Maybe I'm misunderstanding, but there's no seeming way the button would know your intent on second click.

One trick is to add a class when opening, then check that class again to understand wether you want to close it, and remove the class.

Since you are already adding and removing a class for other reasons, maybe this is the best way for you to obtain what you want.

I've remixed your code a bit, directly here in the editor, it should work (more or less), anyway gives you the idea :

 $(".menubutton").click(function () {
    if ($(this).is('.active')) {
      $(".thetopmenu").css("display","none");
      $(this).removeClass("active");
    } else {
      // Displayes the menu
      $(".thetopmenu").css({
        padding : "0px",
        display: "block"
        });
      $(this).addClass("active"); // Add "active" class to selected tab
    }
    $("#shadow").toggle();
  });

Hope it helps, Simone