在div点击动态切换动态（或“自动”）高度

我试图让我的FAQ容器成为动态/响应式，但在正确使用它时遇到了一些麻烦。在div点击动态切换动态（或“自动”）高度

目前，我可以打开容器，但如果再次点击它，它不会收回（或关闭）。以下是我有：

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将不胜感激！

来源

2017-04-21 Michael

您正在使用jQuery，那么为什么不使用jQuery UI手风琴呢？ https://jqueryui.com/accordion/或引导程序崩溃https://v4-alpha.getbootstrap.com/components/collapse/#example – gforce301

首先，请尝试使用.slideToggle()。

然后用<div class="answer">包装您的answer容器。其余的，检查我的小提琴here。

来源

2017-04-21 16:11:30 int11

此解决方案适用于jsfiddle，但出于某种奇怪的原因而不适用于本地主机。错误正在抛出 - 任何想法？ – Michael

'不工作'是什么意思？（不要忘了将'.answer'类添加到你的css中） – int11

常见问题解答容器根本无法打开/关闭 - 但是，我发现原因，你将“固定”起始高度从class .faq_container' - 在为这个类考虑了高度之后，事情就开始奏效了。说了这些，感谢您的帮助！ – Michael

使用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>

来源

2017-04-21 16:10:31 sol

在我的网站上，我有一些使用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/

来源

2017-04-21 16:32:58

也许这。

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>

来源

2017-04-21 16:46:18

在div点击动态切换动态（或“自动”）高度

回答

相关问题