jQueryを使用したdivの展開/折りたたみ
質問
展開したり折りたたんだりしようとしています <div>
内のテキストをクリックすると、 <div>
. 。今の行動は非常に奇妙です。たとえば、次のテキストをクリックすると、 <div>
拡張されています...の <div>
崩壊してからまた拡大します。また、内部のどこかをクリックすると、 div
展開された後、再び折りたたまれます。これは、最初からアニメーションをトリガーしているためだと思います。 <div>
アニメーション化されているのはラッパー内です <div>
. 。コードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Links -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Scripts -->
<script type="text/javascript" src="jQuery.js"></script>
<script>
// document script
$(function(){
// login box event handler
$('#login').click(function() {
$('#loginBox').toggle(
function() {
$('.loginBox').animate({
height: '150px'
},
'1000'
);
$('#username').show();
$('#password').hide();
$('#placeHolder').show();
},
function() {
$('.loginBox').animate({
height: '50px'
},
'1000'
);
$('#username').hide();
$('#password').hide();
$('#placeHolder').hide();
}
);
});
// username field focus and blur event handlers
$('#username').focus(function() {
if($(this).hasClass('placeHolder')){
$(this).val('');
$(this).removeClass('placeHolder');
}
});
$('#username').blur(function() {
if($(this).val() == '') {
$(this).val('Username');
$(this).addClass('placeHolder');
}
});
// password field focus and blur event handlers
$('#placeHolder').focus(function() {
$(this).hide();
$('#password').show();
$('#password').focus();
$('#password').removeClass('placeHolder');
});
$('#password').blur(function() {
if($(this).val() == '') {
$('#placeHolder').show();
$(this).hide();
}
});
});
</script>
</head>
<body>
<div id="loginBox" class="loginBox">
<a id="login" class="login">Proceed to Login</a><br />
<div>
<form>
<input type="text" id="username" class="placeHolder" value="Username" />
<input type="password" id="password" class="placeHolder" value="" />
<input type="text" id="placeHolder" class="placeHolder" value="Password" />
</form>
</div>
</div>
</body>
</html>
何か案は?
解決
はい、使ってください イベント.stopPropagation();
$('#login').click(function(event) {
event.stopPropagation();
そうすれば、イベントは #loginBox にヒットしません。また、アニメーションがキューでスタックするのが心配な場合 (クリックしすぎるとアニメーションが行ったり来たりする) を使用できます。 停止..
$('#username').stop().show();
さらにトグル - 実装では、ログインのクリック時に #loginBox にクリック ハンドラーを追加します。トグル は クリックハンドラー..
// ログインボックスイベントハンドラ
$('#login').toggle(
function() {
$('.loginBox').animate({
height: '150px'
},
'1000'
);
$('#username').show();
$('#password').hide();
$('#placeHolder').show();
},
function() {
$('.loginBox').animate({
height: '50px'
},
'1000'
);
$('#username').hide();
$('#password').hide();
$('#placeHolder').hide();
}
);
もう少し正確です..
所属していません StackOverflow