Question

我正在为我的网站创意制作一个主页，当我点击右上角的登录时，我正在尝试制作一个下拉菜单。类似于此站点上搜索栏旁边的帮助按钮。我知道如何做下拉菜单，但我检查了我的HTML，我的CSS和我的JavaScript，我找不到任何错误。我甚至从下拉菜单中复制了代码段，并将其复制到我的代码中以查看它是否可行，但它仍然没有。有人有什么想法吗？任何帮助是极大的赞赏。

这是我的代码。

var main = function() {
  $('.login').click(function() {
    $('.dropdown-menu').toggle();
  });
}
$(document).ready(main);

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 50px;
  text-transform: uppercase;
}
.nav li {
  display: inline;
}
#left {
  float: left;
}
#right {
  float: right;
}
.jumbotron {
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}
.jumbotron .container {
  position: relative;
  top: 100px;
}
.login {
  font-size: 11px;
}
.dropdown-menu {
  font-size: 16px;
  margin-top: 5px;
  min-width: 105px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="cssfile.css" />
  <title>Fandoms and Stuff</title>
</head>

<body>
  <!--ADD ENDING BODY TAG-->
  <div class="nav">
    <ul id="left">
      <li><a href="HomePage.html">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="Fandoms.html">Fandoms</a>
      </li>
    </ul>
    <ul id="right">
      <li class="dropdown">
        <a href="#" class="login">Log In</a>
        <ul class="dropdown-menu">
          <li><a href="#">Test</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Register</a>
      </li>
    </ul>
  </div>
  <div class="jumbotron">
    <div class="container">
      <h1>Welcome</h1>
      <p>(this is where I put my long description.)</p>
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>

</html>

Answer 1

此类中的填充阻止您访问“login”链接。如果您填充：0，则可以单击该链接并获得响应。我没有进一步研究切换，但您当前遇到的问题是无法点击链接。

.nav a {
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    padding: 50px;
    text-transform: uppercase;
}

Answer 2

我修好了。我当时很蠢。我添加了

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="app.js"></script>

到<head>元素，它工作正常。谢谢你试图帮助我！

Answer 3

我在.dropdown-menu上看不到display：none。

尝试将display：none添加到.dropdown菜单中，以便在页面加载时显示：none并将其更改为显示：当您通过单击.login切换它时阻止。

Javascript无法正常工作？当我单击文本时，菜单不会下拉

3 个答案: