单击按钮时显示/隐藏菜单答案

【问题标题】：show / hide menu on button click单击按钮时显示/隐藏菜单
【发布时间】：2015-08-03 03:07:51
【问题描述】：

我是 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();

【问题讨论】：

Similar issue with working example
toggle 解决了隐藏和显示以及可见性检查的问题

标签： javascript jquery html

【解决方案1】：

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

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

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

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

【讨论】：

删除代码第二行末尾多余的);。

【解决方案2】：

试试这个方法：

$(document).ready(function(){
    $("#cateringMenu").hide();

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

【讨论】：

【解决方案3】：

toggle() jQuery 方法正是为此而设计的：
jQuery:

<script>
$(document).ready(function(){
    $("h1").click(function(){
        $("p").toggle();
    });
});
</script>

HTML：

<h1>Desert menu</h1>
<p>lots of deserts</p>

文档here 很好地解释了它的使用。它负责您原本必须执行的可见性检查。

【讨论】：