Jquery on("click", function event

Jquery on("click", function event

I currently have a very simple jquery function where if the menu is pushed
then the menu is shown.
$(".menu").on("click", function( event ){
$(".menulist").css("display","block");
alert(event);
})
i would like to display none again if the menu button is clicked again or
if they click off the menu.
i have tried the off function as follows but then realised it wouldn't
work anyway:
$(".menu").off("click", function(){
$(".menulist").css("display","none");
})
any advise as to how to do this? if it helps this will be for a mobile
website aswell
EDIT: the event is in the first function as i thought i might be able to
use this event to tell if the item was already showing. either that or
another though is would i be better on("click" function() to check if the
css value of display for the .menu is equal to block or none and then
alter the css from there? this would solve the click onto the menu button
but not off the menu