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

toggle（）jQuery方法就是为此而设计的：
的 jQuery的：

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

<强> HTML

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

文档here很好地解释了它的用法。它会处理您可能需要进行的可见性检查。

按钮单击显示/隐藏菜单

3 个答案: