我正在尝试隐藏显示菜单 <a><img></a> <a>用jQuery</a>

Question

I am trying to show the .list-menu div show on click and then hide on click when the .hamburger anchor is clicked. Right now nothing is happening.

 $('document').ready(function() { $(".list-menu").hide(); $( ".hamburger" ).click(function() { $( ".list-menu" ).show() { }); $( ".hamburger" ).click(function() { $( ".list-menu" ).hide() { }); }); }); 

 <div class="logo"> <div class="about-me-button"> <a href="#" class="hamburger"><img src="/img/menu.svg" alt="hamburger menu"></a> </div> <div class="list-menu"> <ul> <li><a href="#">About Me</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> 

Answer 1

There is a function named .toggle() that "display or hide the matched elements" and you need only 1 .click() event.

 $('document').ready(function() {
   $(".list-menu").hide();

   $(".hamburger").click(function() {
      $(".list-menu").toggle();
   });
});

 $('document').ready(function() { $(".list-menu").hide(); $(".hamburger").click(function() { $(".list-menu").toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="logo"> <div class="about-me-button"> <a href="#" class="hamburger"> <img src="/img/menu.svg" alt="hamburger menu"> </a> </div> <div class="list-menu"> <ul> <li><a href="#">About Me</a> </li> <li><a href="#">Resume</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div> 

Answer 2

$(function() {

    $(".list-menu").hide();

    $( ".hamburger" ).click(function() {
      $( ".list-menu" ).toggle();
    });

});

Answer 3

I think the easiest way would be is the use jquery .toggle() method.

 $(".list-menu").hide();

    //toggle way
    $(".hamburger").click(function () {
        $(".list-menu").toggle();
    });

or if you would like to go an alternative route you can try something like this

//jquery alternative to toggle
    var toggle = false;
    $(".hamburger").click(function () {
        if (!toggle) {
            $(".list-menu").show();
            toggle = true
        } else {
            $(".list-menu").hide();
            toggle = false
        }
    });

I created a fiddle so that you can see how both would work. https://jsfiddle.net/maenucze/