单击按钮显示/隐藏菜单

Question

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

Answer 1

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

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

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

这将只涵盖一半的情况(当菜单是隐藏的)。您必须添加一些额外的逻辑来检查菜单是否隐藏或显示，并相应地执行操作(或者可能希望在这里查看toggle方法：http://api.jquery.com/toggle/)，但希望这足以让您继续下去！

Answer 2

这样试一试：

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

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

Answer 3

切换() jQuery方法正是为此而设计的：

jQuery:

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

HTML:

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

文档这里很好地解释了它的使用。它会处理可见性检查，否则您将不得不这样做。