按钮单击显示/隐藏菜单

I'm new to jQuery and am trying to make a menu for a catering business and figured using jQuery would be the easiest way to implement what I am trying to do. There is a catering menu and a dessert menu, I want to have them both hidden when the page loads but when a button, either catering or dessert, is clicked, show the appropriate menu. i can get it to hide them, but not sure how to get them show show on the button press. Thanks!

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

3 个解决方案

#1

Check out the documentation for the jQuery click method here: https://api.jquery.com/click/

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

This method will set up an event handler for the particular element. You can use it like this:

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

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

That will only cover half of the situations (when the menu is hidden). You'll have to add some additional logic that checks if the menu is hidden or shown and acts accordingly (or might want to check out the toggle method here: http://api.jquery.com/toggle/), but hopefully this is enough for you to continue!

这只会覆盖一半的情况(隐藏菜单时)。你必须添加一些额外的逻辑来检查菜单是否被隐藏或显示并相应地采取行动(或者可能想要在这里检查切换方法:http://api.jquery.com/toggle/),但希望这个足以让你继续!

#2

Try it this way:

试试这种方式:

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

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

#3

The toggle() jQuery method was designed for exactly this:
jQuery:

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

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

HTML:

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

The documentation here explains its use pretty well. It takes care of the visibility checking you would otherwise have to do.

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

#1