如何使用jquery切换动态高度div

Question

我有一个动态div，里面有不同长度的内容。而不是有一个固定的高度滑动内容和空白的空间，我已经在JQuery中创建了一个动态脚本，它只滑动基于多少内容在父div内。

我已经成功地让动态高度滑动，但我不能切换它滑动回来。

$(".parent_accordion").click(function() {
const that = $(this);
//console.log($(this).children().height());
//let learning_accordion = $(this).parent().find(".my_learning_accordion_content").toggleClass("show-open");
let learning_accordion = $(this).next();
let inner_content = 0;
learning_accordion.children().each(function() {
inner_content += $(this).height();
let me = that.next().css("height", inner_content + "px");
me.toggle();
});
$(this).find("i").toggleClass("rotate");
});

.my_learning_accordion_content {
height: 0;
overflow: hidden;
transition: 0.5s;
}

<div class="my_learning_accordion_wrapper">
<div class="learning_accordion">
<div class="learning_accordion_wrap">
<div class="parent_accordion flex-item space-between flex-v-center dark-blue-text">
<div class="title">Completed</div>
<i class="fa-light fa-chevron-down"></i>
</div>
<div class="my_learning_accordion_content dark-blue-text" style="height: 30px;">
<div class="flex-item flex-v-center flex-h-center">
<span>TOTAL:</span>
<span class="cme_bold_text">&nbsp;10</span>
</div>
<div class="cme_tracker-parent">
<div class="cme_tracker_wrap flex-item space-between flex-v-center">
<div class="cme_credits">
<span class="cme_bold_text"></span>
<span class="credits_text font-weight-400">CE credits</span>
</div>
<div class="cme_activity_title_wrap">
<div class="activity_type light-blue-text">touchTALKS</div>
<div class="activity_title font-weight-400">test 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="learning_accordion_wrap">
<div class="parent_accordion flex-item space-between flex-v-center dark-blue-text">
<div class="title">In Progress</div>
<i class="fa-light fa-chevron-down rotate"></i>
</div>
<div class="my_learning_accordion_content dark-blue-text" style="height: 111.781px;">
<div class="cme_tracker-parent">
<div>
<div class="cme_tracker_wrap flex-item space-between flex-v-center">
<div class="cme_credits grey-text">
<span class="cme_bold_text"></span>
<span class="credits_text font-weight-400">CE credits</span>
</div>
<div class="cme_activity_title_wrap">
<div class="activity_type light-blue-text">touchEXPERT OPINIONS</div>
<div class="activity_title font-weight-400">Chronic kidney disease in patients with type 2 diabetes</div>
</div>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<!-- <a class="user_setting_links light-blue-text" href="#">Continue and complete test to claim credits</a> -->
<a class="user_setting_links light-blue-text" href="https://dev.touchneurology.com/education/test-2/ " target="_blank"> Continue and complete test to claim credits </a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
</div>
</div>
<div class="cme_tracker-parent">
<div>
<div class="cme_tracker_wrap flex-item space-between flex-v-center">
<div class="cme_credits grey-text">
<span class="cme_bold_text">1.5</span>
<span class="credits_text font-weight-400">CE credits</span>
</div>
<div class="cme_activity_title_wrap">
<div class="activity_type light-blue-text">touchIN CONVERSATION</div>
<div class="activity_title font-weight-400">Achieving individualized glycemic targets in patients with type 2 diabetes</div>
</div>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<!-- <a class="user_setting_links light-blue-text" href="#">Continue and complete test to claim credits</a> -->
<a class="user_setting_links light-blue-text" href="https://dev.touchneurology.com/cme/test/ " target="_blank"> Continue and complete test to claim credits </a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
</div>
</div>
</div>
<div class="recommendations_and_user_settings">
<!-- <div class="child_page_links flex-item space-between flex-v-center"><a class="user_setting_links light-blue-text" href="#">Update your interests for relevant content</a><i class="fa-light fa-arrow-right-long light-blue-text"></i></div> -->
<div class="child_page_links flex-item space-between flex-v-center">
<a class="user_setting_links light-blue-text" href="/my-learning/saved-activities/">Saved activities</a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<a class="user_setting_links light-blue-text" href="/my-learning/saved-activities/">Your learning history</a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<a class="user_setting_links light-blue-text" href="/my-learning/subscriptions-interests/">Clinical Interests</a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<a class="user_setting_links light-blue-text" href="/my-learning/subscriptions-interests/">Communication Preferences</a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<a class="user_setting_links light-blue-text" href="/my-learning/notifications/">Notifications</a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
<div class="child_page_links flex-item space-between flex-v-center">
<a class="user_setting_links light-blue-text" href="/my-learning/account-settings/">Account settings</a>
<i class="fa-light fa-arrow-right-long light-blue-text"></i>
</div>
</div>
</div>
</div>
</div>

Answer 1

我设置了一个通过JS添加内容的示例，您不需要在元素上设置任何高度。slideToggle会处理的。

你可以设置动画速度，动画完成后运行一个函数。

const acContent = `Lorem ipsum dolor sit amet consectetur adipiscing elit vehicula sapien id, cras dictumst ultrices placerat suspendisse eros auctor arcu in magnis pellentesque, phasellus dis sociosqu lectus ridiculus pretium libero tempus penatibus. Condimentum sed etiam tristique vehicula conubia molestie cursus dictumst litora, curae enim vitae magnis eget vel placerat convallis rutrum, dignissim primis ligula quam mattis fermentum dictum natoque. Duis porttitor nulla bibendum nascetur in nam, nostra suspendisse sociosqu class nisi vulputate feugiat, tempor cursus odio eu ac.
Turpis feugiat porta lacus condimentum mi, euismod iaculis eleifend inceptos ad gravida, fusce cursus neque nec. Ultrices orci rhoncus mollis vehicula magnis posuere, diam a vitae viverra donec, erat dis venenatis nam per. Interdum pulvinar tortor taciti montes enim maecenas nec laoreet mus, eu felis consequat libero tincidunt nisl penatibus dis porttitor, eleifend sollicitudin ad odio posuere tristique curae varius.`;
const toggleSpeed = 1000;
const toggleAnimationFinished = function() {
alert('Animation Finished');
}
$('.my_learning_accordion_content').text(acContent);
$(".parent_accordion").click(function() {
$(this).next().slideToggle(toggleSpeed, toggleAnimationFinished);
});

.my_learning_accordion_content {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="parent_accordion">Title</h3>
<div class="my_learning_accordion_content">Accordion content</div>