javascript - jQuery 下拉菜单无法正常工作

Question

所以我尝试制作一个移动菜单，一切都很顺利，但是当我点击它时，它会将我带到页面顶部，而不是下拉菜单。 CDN 已正确链接(使用 jQuery 警报检查)，因此它是 anchor 标记错误或 jQuery 代码。你们能检查一下吗？

$(document).ready(function() {
  $('#i-nav').click(function() {
    $('ul').toggleClass('show');
  });
});

html,
body {
  min-width: 320px;
  min-height: 320px;
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: #f1f1f1;
}
.show {
  display: block;
}
.testnav ul {
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  margin-right: 50px;
}
.testnav ul li {
  display: inline;
  float: left;
  width: auto;
  height: 100px;
}
.testnav ul li a {
  line-height: 100px;
  display: block;
  float: left;
  padding: 0 20px;
  color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
  color: white;
  border-bottom: 5px solid #b0b0b0;
}
#home:hover {
  background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
  background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
  background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
  background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
  background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
  float: left;
  z-index: 101;
  line-height: 100px;
  text-align: center;
  display: none;
}
#logo {
  float: left;
  margin-left: 50px;
  margin-top: 15px;
}
a {
  text-decoration: none;
  text-transform: uppercase;
}
.floatright-wrapper {
  float: right;
}
.testnav {
  width: 100%;
  height: 100px;
  background: white;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .floatright-wrapper {
    float: none;
  }
  .testnav ul {
    width: 100%;
    text-align: center;
    margin: 0;
    display: none;
  }
  .testnav ul li {
    width: 100%;
  }
  .testnav ul li a {
    width: 100%;
    text-align: center;
    outline: solid white 1px;
  }
  #logo {
    margin: 10px;
  }
  #i-nav {
    float: right;
    margin-right: 40px;
    display: block;
    font-size: 30px;
    color: black;
  }
}
@media screen and (max-width: 400px) {
  #logo {
    width: 50%;
    margin-top: 27px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
  <img src="css/images/logo.png" alt="logo" id="logo">
  <a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
  <nav>
    <ul>
      <div class="floatright-wrapper">
        <li><a href="#" target="_top" id="home">Home</a></li>
        <li><a href="#" target="#text-boxes" id="menu2">Menu2</a></li>
        <li><a href="#" target="picture-boxes-section" id="menu3">Menu3</a></li>
        <li><a href="#" id="menu4">Menu4</a></li>
        <li><a href="#" id="menu5">Menu5</a></li>
      </div>
    </ul>
  </nav>
</div>

Answer 1

页面跳转到顶部是因为当您单击链接时它认为这是您要执行的操作。为了防止这种情况，请尝试像下面那样编辑您的功能。 .preventDefault 函数告诉浏览器您不希望它像通常的 anchor 标记那样尝试转到其他页面。

$('#i-nav').click(function(e) {
    e.preventDefault();
    $('ul').toggleClass('show');
});

编辑

您的菜单未显示的原因是您将 show 类添加到页面上的每个 ul。尝试具体一点，比如 $('.test-nav ul').toggleClass('show');

如果您仍然没有看到菜单，这很可能是因为之前带有 display: none 的 css 正在覆盖您的节目类的 display: block 您可以解决这可以通过将其更改为 display: block !important 或者您可以显式地为 ul 指定一个类或 id，然后在你的 jQuery。

这是我正在谈论的例子。如果你有几个这样的嵌套 div:

<div class="first">
    <div class="second"></div>
</div>

像这样使用 css:

.first .second {
    display: none;
}

.second {
    display: block;
}

第一个总是会覆盖第二个。