情報の表示を作成しています。ユーザーがサムネイルをクリックすると、その下にボックスが開き、そのサムネイルに固有の情報が表示されます (情報は XHR から取得され、jfiddle では正しく機能しません)。箱を開けるのは問題ではありません - 私は箱を正しく閉めようとしています。
私がやりたいことはこれです：
if (box is closed) {
open box;
}
if (box for this thumb is open) {
close box;
}
if (box for another thumb is open) {
close other box;
on complete of close, open new box;
}
また、クローズボックスアイコンにアタッチできるボックスを閉じるための別の関数を作成したいと考えています。
これについてどうすればよいでしょうか？はっきり見えません。
私が過去に行った1つの方法は、オープンボックスにマーカーcssクラスを追加することです。jQuery animateを使用している場合は、完全なコールバックを使用して、開いたばかりの要素にクラスを追加することで、これを簡単に行うことができます。
それができたら、アニメーションをトリガーするクリックハンドラーで、次の手順を実行します。1）クリックされた/開いている要素にクラスが開いているかどうかを確認し、開いている場合は、これを示す一時的なフラグを設定します。 。
2）開かれたクラスを持つすべての要素に対してjQuery検索を実行し、それらの閉じをアニメーション化します。
3）クリックした要素がまだ開いていないことをフラグが示している場合は、開いているアニメーションを作成します。それ以外の場合は何もしません。
これは、クリックすると大きくなり、半透明になる複数のdivがある単純な例ですが、一度に大きくできるのは1つだけであり、すでに展開されているdivをクリックすると、通常の状態に戻ります。
$('div').on('click', pop);
function pop(event) {
debugger;
var alreadyPopped = false;
if ($(event.target).hasClass('popped')) {
alreadyPopped = true;
}
$('.popped').animate({
height: 50, width: 50, opacity: 1
}, 1000, "linear", function(e) {
$('.popped').removeClass('popped');
});
if (!alreadyPopped) {
$(event.target).animate({
height: 200, width: 200, opacity: 0.5
}, 1000, "linear", function(e) {
$(event.target).addClass('popped');
});
}
}
ライブデモ： http： //jsfiddle.net/ijoukov/zA87j/1/
コードを再構築するためにしばらく遊んだ後、解決策を見つけました。ここで重要なのは、index() を使用して、クリックされたボタンを次に行う必要のある参照ポイントとして識別することだったと思います。
Javascript:
//store for dropdown activity: false=inactive/true=active
var ddopen = false;
//store for last clicked button
var index;
//Create and animate/activate dropdown container
$.fn.ddExpand = function (btnNo) {
// Identify parents of the button clicked, amd create the animating container
var btn = $('#'+btnNo);
btn.parent().after('<div class="box"></div>');
//load content into container
$('.box').load('test2.html #content'+btnNo);
$('.box').show().animate({'height':'300px'}, 1000, function () {
$('.content').fadeIn();
});
//Declare dropdown as open/active
ddopen = true;
// Store button index for later reference
index = btnNo;
}
//Deactivate/close and delete dropdown container
$.fn.ddCollapse = function (btnNo) {
$('.content').fadeOut();
$('.box').animate({'height':'0px'}, 500, function () {
$(this).remove();
//If function parameter IS a number, reactivate dropdown according to new button index / else / Declare dropdown as closed/deactivated
(btnNo!=false) ? $(this).ddExpand(btnNo) : ddopen = false;
});
}
$('.button').on('click', function () {
//Capture index of button
var btnNo = $('.button').index(this);
//Silently add index of button as id attribute to button for later reference. This will also allow for extensibility should more buttons be added.
$(this).attr('id', btnNo);
//If dropdown is inactive
if (ddopen == false) {
//active dropdown according to button index
$(this).ddExpand(btnNo);
} else { //if dropdown is already active
//if the button clicked now is different to last button clicked
if (btnNo != index) {
//pass new button index on to collapse current dropdown and reactive with new index
$(this).ddCollapse(btnNo);
} else { //if button clicked now is the SAME as last button clicked
// close/deactivate existing dropdown and return to default state
$(this).ddCollapse(false);
}
}
});
//process close button added to loaded content
$('body').on('click', '.close', function () {
// close/deactivate existing dropdown and return to default state
$(this).ddCollapse(false);
});
HTML
<div class="btnCase">
<div class="button"></div>
</div>
<div class="btnCase">
<div class="button"></div>
</div>
<div class="btnCase">
<div class="button"></div>
</div>
<div class="btnCase">
<div class="button"></div>
</div>
<div class="btnCase">
<div class="button"></div>
</div>
あなた自身の質問に答えていませんか？。トグル（）