Question

我已经找到了答案，但我仍然不知道自己哪里出错了。

当它是一个小屏幕时，菜单框会出现，它看起来很棒但是当我点击它时，没有任何反应。

这是我的代码

＆＃13;

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

＆＃13;

}
nav ul {
  float: right;
  list-style: none
}
nav li {
  display: inline;
  float: left;
  height: 80px;
  margin-right: 20px;
}
nav li a {
  display: block;
  float: left;
  height: 70px;
  line-height: 90px;
  padding: 0px 30px;
  font-family: sans-serif;
}
nav ul a {
  text-decoration: none;
  color: #ffffff;
  font-size: 30px;
  text-shadow: 2px 2px 2px #000000;
}
#i-nav {
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
  width: 54px;
  height: 54px;
  background: #ffffff;
  line-height: 50px;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}
@media (max-width: 950px) {
  nav ul {
    width: 100%;
  }
}
@media (max-width: 700px) {
  nav ul {
    display: none;
  }
  nav li {
    width: 100%;
  }
  nav li a {
    width: 100%;
    text-align: center;
    outline: solid 1px;
    padding: 0px;
  }
  nav li a:hover {
    background: #CCCCCC;
  }
}
@media (max-width: 450px) {
  #logo {
    width: 100%;
  }
  #logo img {
    width: 100%;
  }
  #i-nav {
    top: 100px;
  }
  h1 {
    width: 100%;
  }
}
@media (min-width: 700px) {
  #i-nav {
    display: none;
  }
}

＆＃13;

<link rel="stylesheet" type="text.css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="main.js"></script>
<title></title>
</head>

<body>
  <header>
    <div id="logo">
      <img src="img/logo.png" width="300" height="88" alt="" />
    </div>
    <nav>
      <ul>
        <li><a href="#">1</a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
      </ul>
    </nav>
    <a id="i-nav" href="#">Menu</a> 
  </header>

＆＃13;

Answer 1

你的问题就在这一部分：

  nav ul {
    display: none;
  }

因为您在.show元素上切换<nav>类，所以它不会改变隐藏<ul>的事实。

你应该切换.show上的<ul>类，或者想一些不同的CSS方法。

无法在点击时显示div

1 个答案: