为什么我的菜单不下拉？答案

【问题标题】：Why my menu doesn't dropdown?为什么我的菜单不下拉？
【发布时间】：2016-04-06 10:31:46
【问题描述】：

我只是在为我的网站制作一个“登录”/“注册”下拉菜单，但不知道为什么它不能正常工作。

我是 jQuery 的初学者，所以问题可能出在它身上。或者也许它与 HTML 或 CSS 有关，我不确定。当我测试页面并打开控制台时，jQuery 没有显示任何错误，所以我不确定问题出在哪里。代码如下：

HTML：

<div id="navthing">
      <h2><a href="#" id="loginform">Log in</a> | <a href="#">Sign Up</a></h2>
   <div class="login">
    <div class="arrow-up"></div>
     <div class="formholder">
       <div class="randompad">
           <fieldset>
             <label name="email">Email</label>
             <input type="email" value="example@example.com" />
             <label name="password">Password</label>
             <input type="password" />
             <input type="submit" value="Login" />
           </fieldset>
       </div>
      </div>
   </div>
</div>

CSS：

#navthing {
    text-align: right;
    padding: 0.5em;
}

.login {
    position: relative;
    width:250px;
    display:none;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid #ECF0F1;
  left: 10%;
  position: absolute;
  top: -10px;
}

.formholder input[type="email"], .formholder input[type="password"] {
  padding: 7px 5px;
  margin: 10px 0;
  width: 96%;
  display: block;
  font-size: 18px;
  border-radius: 5px;
  border: none;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
}

.formholder input[type="email"]:focus, .formholder input[type="password"]:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #1abc9c;
}
.formholder input[type="submit"] {
  background: #1abc9c;
  padding: 10px;
  font-size: 20px;
  display: block;
  width: 100%;
  border: none;
  color: #fff;
  border-radius: 5px;
}
.formholder input[type="submit"]:hover {
  background: #1bc6a4;
}

.randompad {
  padding: 10px;
}

.green {
  color: #1abc9c;
}

a {
  color: #ecf0f1;
  text-decoration: none;
}
a:hover {
  color: #1abc9c;
}

jQuery:

$('input[type="submit"]').mousedown(function(){
  $(this).css('background', '#2ecc71');
});
$('input[type="submit"]').mouseup(function(){
  $(this).css('background', '#1abc9c');
});

$('#loginform').click(function(){
  $('.login').fadeToggle('slow');
  $(this).toggleClass('green');
});



$(document).mouseup(function (e)
{
    var container = $(".login");

    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        container.hide();
        $('#loginform').removeClass('green');
    }
});

它显示正常，但当我点击“登录”时没有下拉。怎么了？谢谢。

编辑 1： html 页面的头部包括这些文件：

<head>
<meta charset="utf-8">
{% load staticfiles %} 

<title>{% block title %}Index{% endblock %}</title>
{% load static from staticfiles %}
{% block style_base %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
{% endblock %}
<meta name="description" content="{% block description %}{% endblock %}">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,300' rel='stylesheet' type='text/css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
<script src="static/js/main.js" type="text/javascript"></script>
<script src="static/js/login3.js" type="text/javascript"></script>
</head>

这里有两个 jQuery 源，但我只尝试了一个，但没有结果。网站中也有一个滑块（在 main.js 中），它使用 jQuery 并且工作正常。

当我加载页面时，它会显示登录 |注册，但当我点击“登录”按钮时没有任何反应（没有下拉表单，什么都没有）。

【问题讨论】：

它正在工作jsfiddle.net/zgajb4ga。您的预期结果是什么？
你是否包含了必要的 jQuery 文件？？
我可以看到它在链接上工作...无法理解。我用文档的编辑了第一篇文章。预期的结果是在您的链接中发生的事情，只是在 HTML 中显示一个下拉表单。
会不会是同一个 div 中的一些其他元素有问题，或者是因为 z-index 或类似的原因？无法弄清楚为什么在所有 jQuery 似乎都可以正常工作时下拉菜单没有显示...

标签： javascript jquery css menu dropdown

【解决方案1】：

在您的 jquery 代码的第一部分中，我添加了这个并且它起作用了：

$( document ).ready(function() {

});

解释：https://api.jquery.com/ready/

【讨论】：

哦，就是这么简单。谢谢！