0
私は自分のウェブサイトの「ログイン」/「サインアップ」ドロップダウンメニューで作業していますが、なぜ正しく動作しないのかわかりません。メニューがドロップダウンしないのはなぜですか？
私は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="[email protected]" />
<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');
}
});
私はログイン」をクリックしに'。どうしましたか？ありがとうございました。
EDIT 1：ここでは
<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ソースがあるが、私は結果なしで、それぞれの一つだけで試してみた： htmlページの先頭には、それらのファイルが含まれています。 jQueryを使ってうまく動作するウェブサイト（main.js内）のスライダーもあります。
ページをロードすると、[ログイン|サインアップしても、[ログイン]ボタンをクリックしても何も起こりません（ドロップダウンフォームなし、何もありません）。
をそれはhttps://jsfiddle.net/zgajb4ga/を働いています。期待した結果は何ですか？ – ketan
必要なjQueryファイルが含まれていますか？ – Pugazh
リンク上で動作しているのがわかります...理解できません。私は自分の文書の
で最初の投稿を編集しました。期待される結果はあなたのリンクで起こるもので、HTMLのようなドロップダウンフォームを表示するだけです。 – Jim