JQuery動畫開關點擊多個元素

Question

Demo here

我正在構建信息顯示;當用戶點擊縮略圖時，會在其下方打開一個框以顯示該縮略圖的特定信息（信息從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; 
} 

我也想製作一個單獨的功能關閉，我可以附加到一個關閉按鈕圖標的框。

我該如何做到最好？我看不清楚有多清楚。

Answer 1

你沒有回答你自己的問題嗎？ .toggle()

Answer 2

我過去做過的一種方法是將標記CSS類添加到打開的框中。如果您使用jQuery動畫製作，可以使用完整的回調將該類添加到剛剛打開的元素中，您可以輕鬆完成此操作。

一旦你有了這個，你的邏輯，在你的觸發動畫的點擊處理程序，執行以下操作： 1）檢查被點擊/ /正在打開的元素是否有打開的類，如果是這樣設置一些臨時標誌來表明這一點。

2）做一個jQuery搜索所有具有已打開類的元素，併爲它們的關閉設置動畫。

3）如果您的標誌告訴您單擊的元素尚未打開，則將其設置爲打開狀態，否則什麼也不做。

這裏有一個簡單的例子，我有多個div，點擊時它們會變得更大，半透明，但是一次只能有一個很大，點擊一個已經擴展的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/

Answer 3

玩了一段時間來重建代碼後，我找到了解決辦法。我認爲這個關鍵在於使用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>