javascript - 如何更改提供的 jQuery 以正确切换菜单？

Question

我显示了一个汉堡包菜单图标，并希望它有一个下拉菜单，如下所示:

<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="about" href="#about">about</a></li>
    <li><a id="work" href="#work">work</a></li>
    <li><a id="contact" href="#contact">contact</a></li>
  </ul>
</div>

此菜单的显示设置为“无”。下面是我用来显示导航列表的 jQuery。我希望它在单击时出现并在再次单击时消失(切换)。为什么这不起作用？需要做哪些调整？ jsfiddle here

$(document).ready(function() {
    var n = $("#nav-list");

    $("#nav-icon").click(function() {
        if (n.css("display, none")) {
            n.css("display, block");
        } else {
            n.css("display, none");
        }
    });
});

Answer 1

我会使用 :hidden 来检查菜单是否隐藏/可见，然后您需要用引号分隔 $.css() 中的 CSS。

$(document).ready(function() {

  var $n = $("#nav-list");

  $("#nav-icon").click(function() {

    if ($n.is(':hidden')) {

      $n.css("display","block");

    } else {

      $n.css("display","none");
    }
  });

});

#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>