javascript - 单击按钮显示/隐藏菜单

我是jQuery的新手，正在尝试为餐饮企业制作菜单，并且认为使用jQuery将是实现我尝试做的最简单的方法。
   有一个餐饮菜单和一个甜点菜单，我想在页面加载时将它们都隐藏，但是当单击餐饮或甜点按钮时，显示适当的菜单。我可以隐藏它，但不知道如何在按按钮时显示它们。
谢谢！

var $cateringMenu = $("#cateringMenu");
var $cateringButton = $("#cateringButton");
var $dessertButton = $("#dessertButton");
var $dessertMenu = $("#dessertMenu");

function hideMenu(){
    $cateringMenu.hide();

}

function showCateringMenu(){
    if($cateringButton.click() ){
        $cateringMenu.show();
    }

}



hideMenu();

showCateringMenu();

最佳答案

在此处查看jQuery click方法的文档：https://api.jquery.com/click/

此方法将为特定元素设置事件处理程序。您可以像这样使用它：

$cateringButton.click(function() {
  $cateringMenu.show();
});

这将仅涵盖一半的情况（菜单隐藏时）。您必须添加一些其他逻辑，以检查菜单是否被隐藏或显示并采取相应措施（或者可能想在此处查看toggle方法：http://api.jquery.com/toggle/），但是希望这足以让您继续！