show/hide menu on button click

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> 

документация here объясняет его использование довольно хорошо , Он позаботится о проверке видимости, которую вам в противном случае пришлось бы сделать.