Question

我尝试在点击时显示.list-menu div show，然后在点击.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()的函数＆＃34;显示或隐藏匹配的元素＆＃34; ，您只需要1 .click()个事件。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

我试图隐藏<a><img/> with jquery</a>的节目菜单

3 个答案: