簡單的jQuery手風琴，可以跟蹤高度變化，使其他物體沿着動畫

-1

我需要創建一個手風琴，可以跟蹤它對高度所做的調整。在大多數情況下，手風琴的容器會自動調整其高度，但我的手風琴位於相對定位的div內的絕對定位的div，我需要調整相對定位的div的高度以及手風琴以移動一些背景周圍的圖像。萬一別人永遠需要類似的東西，這裏是我想出了（帶ahren和dmi3y的幫助下）結果：簡單的jQuery手風琴，可以跟蹤高度變化，使其他物體沿着動畫

http://jsfiddle.net/MSatE/48/

的HTML：

<div id="accordion"> 
    <h3>Sample Header 1</h3> 
    <div> 
     <p> 
      Sample<br /> 
      More Sample Text<br /> 
      Yet More Sample Text<br /> 
      I wish I could come up with something more clever<br /> 
      This should be enough for you to see the problem 
     </p> 
    </div> 
    <h3>Sample Header 2</h3> 
    <div> 
     <p> 
      Sample<br /> 
      More Sample Text<br /> 
      Yet More Sample Text<br /> 
      I wish I could come up with something more clever<br /> 
      This should be enough for you to see the problem Sample<br /> 
      More Sample Text<br /> 
      Yet More Sample Text<br /> 
      I wish I could come up with something more clever<br /> 
      This should be enough for you to see the problem 
     </p> 
    </div> 
</div>

的CSS：

#accordion { 
    width: 600px; 
    border: 1px solid #C0C0C0; 
    border-bottom: none; 
    box-shadow: 0 0 5px #C0C0C0; 
    -webkit-box-shadow: 0 0 5px #C0C0C0; 
    margin: 30px auto; 
    background: #FFF; 
} 

#accordion h3 { 
    border-bottom: 1px solid #C0C0C0; 
    padding: 10px; 
} 

#accordion div { 
    display: none; 
    padding: 20px; 
    border-bottom: 1px solid #C0C0C0; 
    background: #F4F4F4; 
} 

#accordion p { 
    padding: 0; 
    margin: 0; 
} 

#accordion h3:hover { 
    cursor: pointer; 
} 

.forMeasure { 
    position: absolute; 
    visibility: hidden; 
    display: block!important; 
}

的JavaScript/jQuery的：

$('#accordion h3').click(function(){ 
    var adjustment = 0; 
    var div = $(this).next('div'); 

    if(div.css('display') == 'none') 
    { 
     adjustment += div.addClass('forMeasure').outerHeight(); 
     div.removeClass('forMeasure'); 
     div.slideDown(); 
     div.siblings('div').each(function(){ 
      if($(this).css('display') == 'block') 
      { 
       adjustment -= $(this).outerHeight(); 
       $(this).slideUp(); 
      } 
     }); 
    } 
    else 
    { 
     adjustment -= div.outerHeight(); 
     div.slideUp(); 
    } 
});

來源

2012-11-27 dnag

** tldr; ** - 考慮爲您的問題創建一個小的測試用例，如果可以的話。它會花任何時間5-10分鐘閱讀並理解你的問題，因爲它目前的狀況。 – ahren

好點，謝謝 - 我編輯了這篇文章。 – dnag

你認真地期待有人讀到所有這些？ –

我已經簡化你的手風琴......

http://jsfiddle.net/MSatE/3/

$('#accordion h3').click(function(){ 
    $(this).next().slideDown().siblings('div').slideUp(); 
});

唯一的CSS改變我做：

#accordion div { 
    position: relative; /* <-- changed to relative */ 
    display:none; /* <-- changed from visibility:hidden; to display:none; */ 
    padding: 20px; 
    border-bottom: 1px solid #C0C0C0; 
    background: #F4F4F4; 
}

編輯

按照要求..一種檢索n的方法手風琴EW高度前動畫開始...
http://jsfiddle.net/MSatE/6/

$('#accordion h3').click(function(){ 
    /* Extra code to get the height of the new accordion once this div has been shown... */ 
    var $t = $(this); 
    $t.siblings('div').filter(':visible').addClass('oldVisible'); 
    $t.next().show().siblings('div').hide(); 
    var height = $('#accordion').outerHeight(); 
    $t.next().hide().siblings('.oldVisible').show().removeClass('oldVisible'); 

    console.log(height); 
    $t.next().slideDown().siblings('div').slideUp(); 
});

來源

2012-11-27 21:07:15 ahren

我需要更復雜的東西，因爲我必須獲取div的高度，同時它是不可見的，以便同時爲相同數量的動畫元素添加動畫。至少我覺得我需要它。我可能是錯的。 – dnag

爲什麼？ '＃content'應該自動擴展。 – ahren

不是當＃div1絕對定位時 – dnag

您是否檢查了jQueryUI accordion feature？如果沒有，請查看他們的示例，將它們複製/粘貼到您網站上的文檔中，並花費10分鐘時間播放它。你會很高興你做到了。

來源

2012-11-27 20:54:01 gibberish

感謝您的回覆。我有 - 在我添加這些動畫之前，我最初使用的是jquery-ui手風琴。我用過很多次。但在這種情況下，我的專業水平很難完成上面提到的協調動畫。 Jsfiddle即將推出。 – dnag

在這裏，我已經改變你的jQuery的一個小一點，讓你在問我想什麼。現在基本上內容div的高度涵蓋了它的所有內容。

var div_height = $(this).height(); 
$(this).css('height', '100%');

希望這是你要找的人：http://jsfiddle.net/MSatE/9/

看着它的時候剛剛以下行調整到100％，很簡單！ Regards， -Epik-

來源

2012-11-27 23:02:35 Epik

jsfiddle實際上並不適合我，但我得到了我需要的答案。謝謝回覆！ – dnag

簡單的jQuery手風琴，可以跟蹤高度變化，使其他物體沿着動畫

回答

相關問題