我正在嘗試隱藏顯示菜單 <a><img></a> <a>用jQuery</a>

Question

我試圖在單擊時顯示.list-menu div，然后在單擊.hamburger錨點時隱藏。 現在沒有任何反應。

 $('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

有一個名為.toggle()的函數可“顯示或隱藏匹配的元素”，並且您只需要1個.click()事件。

 $('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

我認為最簡單的方法是使用jquery .toggle（）方法。

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

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

或者，如果您想走替代路線，可以嘗試類似的方法

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

我創建了一個小提琴，以便您可以看到兩者如何工作。 https://jsfiddle.net/maenucze/