在div點擊動態切換動態（或「自動」）高度

Question

我試圖讓我的FAQ容器成爲動態/響應式，但在正確使用它時遇到了一些麻煩。

目前，我可以打開容器，但如果再次點擊它，它不會收回（或關閉）。以下是我有：

JS：

$('.faq_container').on('click', function() { 
    $(this).find('.faq_up-arrow, .faq_down-arrow').toggle(); 
    $(this).animate({ 
    height: $('.faq_container').get(0).scrollHeight 
    }, 250, function() { 
    $(this).height('auto'); 
    }); 
}); 

這是上面的代碼中的一個FULL DEMO ...

另一種方法我試過是這樣的：

$('.faq_container').on('click', function() { 
    $(this).find('.faq_up-arrow, .faq_down-arrow').toggle(); 
    if ($(this).height() != 40) { 
     $(this).animate({ height : 40 }, 250); 
    } else { 
     $(this).animate({ height : 400 }, 250); 
    } 
}); 

然而，正如你在這裏所看到的，這是基於「固定」高度，而不是將其設置爲更具動態性/響應性的方式......

下面是對這個這個其他替代

我想如果可以使用第一種方法，但似乎無法得到的股利收備份...

任何幫助一個DEMO將不勝感激！

Answer 1

首先，請嘗試使用.slideToggle()。

然後用<div class="answer">包裝您的answer容器。其餘的，檢查我的小提琴here。

Answer 2

使用jQuery each()來遍歷容器。使用height()檢查容器是否關閉。如果打開它，如果沒有將其設置回原始高度。

fiddle

$('.faq_container').each(function() { 
 
    $(this).on('click', function(e) { 
 

 
    if ($(this).height() < 41) { 
 

 
     $(this).find('.faq_up-arrow, .faq_down-arrow').toggle(); 
 

 
     $(this).animate({ 
 
     height: $(this).scrollHeight 
 
     }, 250, function() { 
 
     $(this).height('auto'); 
 
     }); 
 
    } else { 
 

 
     $(this).find('.faq_up-arrow, .faq_down-arrow').toggle(); 
 

 
     $(this).animate({ 
 
     height: $(this).scrollHeight 
 
     }, 250, function() { 
 
     $(this).height('40px'); 
 
     }); 
 
    } 
 
    }); 
 
});

.faqs_container_wrapper { 
 
    width: calc(100% - 40px); 
 
    padding: 0 0 20px 0; 
 
    margin: 20px 20px 0 20px; 
 
    background: #F1F1F1; 
 
    box-shadow: inset 0 1px #FFF; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    float: left; 
 
} 
 

 
.faq_container { 
 
    width: calc(100% - 40px); 
 
    height: 40px; 
 
    padding: 0; 
 
    margin: 20px 20px 0 20px; 
 
    background: #DDD; 
 
    border-radius: 3px 3px 0 0; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.faq_down-arrow { 
 
    width: 40px; 
 
    height: 40px; 
 
    padding: 0; 
 
    margin: 0; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    cursor: pointer; 
 
} 
 

 
.faq_up-arrow { 
 
    width: 40px; 
 
    height: 40px; 
 
    padding: 0; 
 
    margin: 0; 
 
    background: blue; 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    cursor: pointer; 
 
    -moz-transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 

 
.faq_container h3 { 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 0 5px; 
 
    margin: 0; 
 
    background: #D1D1D1; 
 
    box-shadow: 0 1px #E1E1E1; 
 
    border-bottom: 1px solid #333; 
 
    border-radius: 3px 3px 0 0; 
 
    float: left; 
 
    color: #333; 
 
    line-height: 40px; 
 
    cursor: pointer; 
 
} 
 

 
.faq_container:nth-of-type(2n) h3 { 
 
    background: #C1C1C1; 
 
} 
 

 
.faq_container h3 span { 
 
    width: 30px; 
 
    height: 30px; 
 
    padding: 0; 
 
    margin: 5px; 
 
    background: linear-gradient(#E67E22, #D35400); 
 
    box-shadow: inset 0 1px #F39C12; 
 
    border: 1px solid #E67E22; 
 
    border-radius: 50%; 
 
    float: left; 
 
    color: #FFF; 
 
    line-height: 29px; 
 
    text-align: center; 
 
    text-shadow: -1px -1px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.faq_container p { 
 
    width: 100%; 
 
    padding: 0 20px; 
 
    margin: 20px 0 0 0; 
 
    float: left; 
 
} 
 

 
.faq_container p:last-of-type { 
 
    padding: 0 20px 20px 20px; 
 
} 
 

 
.faq_container p a, 
 
.faq_container a { 
 
    color: #C0392B; 
 
} 
 

 
.faq_container p a:hover, 
 
.faq_container a:hover { 
 
    color: #E74C3C; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="faqs_container_wrapper"> 
 

 
    <div class="faq_container"> 
 

 
    <div class="faq_down-arrow"></div> 
 
    <div class="faq_up-arrow"></div> 
 

 
    <h3><span title="Question">Q</span> Post question here</h3> 
 
    <p><b><i>Answer</i>:</b> Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer 
 
     here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. 
 
    </p> 
 
    <p>Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. 
 
     Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. 
 
    </p> 
 

 
    </div> 
 

 
    <div class="faq_container"> 
 

 
    <div class="faq_down-arrow"></div> 
 
    <div class="faq_up-arrow"></div> 
 

 
    <h3><span title="Question">Q</span> Post question here</h3> 
 
    <p><b><i>Answer</i>:</b> Post answer here</p> 
 

 
    </div> 
 

 
    <div class="faq_container"> 
 

 
    <div class="faq_down-arrow"></div> 
 
    <div class="faq_up-arrow"></div> 
 

 
    <h3><span title="Question">Q</span> Post question here</h3> 
 
    <p><b><i>Answer</i>:</b> Post answer here <a href="#">Test</a></p> 
 

 
    </div> 
 

 
    <div class="faq_container"> 
 

 
    <div class="faq_down-arrow"></div> 
 
    <div class="faq_up-arrow"></div> 
 

 
    <h3><span title="Question">Q</span> Post question here</h3> 
 
    <p><b><i>Answer</i>:</b> Post answer here</p> 
 

 
    </div> 
 

 
    <div class="faq_container"> 
 

 
    <div class="faq_down-arrow"></div> 
 
    <div class="faq_up-arrow"></div> 
 

 
    <h3><span title="Question">Q</span> Post question here</h3> 
 
    <p><b><i>Answer</i>:</b> Post answer here</p> 
 

 
    </div> 
 

 
</div>

Answer 3

在我的網站上，我有一些使用CSS選擇器來顯示和隱藏內容的選項卡，應該可以做同樣的工作（並且不需要js工作）。

HTML：

<div class="collapsable"> 
<input type="checkbox" id="faq1" /> 
<label for="faq1">FAQ1</label> 
<div> 
    Your FAQ goes here! 
</div> 
<input type="checkbox" id="faq2" /> 
<label for="faq2">FAQ2</label> 
<div> 
    Have fun with it! 
</div> 
</div> 

CSS：

.collapsable input { display: none } 
.collapsable input + label + div { display: none } 
.collapsable input:checked + label + div{ display: block; } 

.collapsable label { 
cursor: pointer; 
display:block; 
} 

小提琴：https://jsfiddle.net/8zstf5ge/27/

Answer 4

也許這。

https://jsfiddle.net/auunkszm/5/

我添加了一個功能，獲取目標的高度，從這個similar SO post借來的。它可以快速計算「自動」高度應該是多少。

var openClass = 'faq--open'; 
$('.faqs').on('click', '.faq_header', function() { 
    var el = $(this).closest('.faq').toggleClass(openClass), 
     content = el.find('.faq_content'), 
     shouldOpen = el.hasClass(openClass); 
    content.animate({ height: getTargetHeight(content, shouldOpen) }, 250); 
}); 

function getTargetHeight(el, shouldOpen) { 
    if (shouldOpen) { 
    var currentHeight = el.height(), 
     autoHeight = el.css('height', 'auto').height(); 
    el.height(currentHeight); 
    return autoHeight; 
    } 
    return 0; 
} 

我也改變了你的HTML標記，以便更容易使用。 Try to avoid float。

<div class="faq"> 
    <div class="faq_header"> 
    <h3><span title="Question">Q</span> What the what?</h3> 
    <div class="faq_arrow"></div> 
    </div> 
    <div class="faq_content"> 
    <p><!-- content --></p> 
    </div> 
</div>