javascript 手风琴 - VE友好

Posted 2021-05-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 手风琴 - VE友好相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
	<title>Accordion - Item</title>
	<style></style>
</head>
<body>
	<div class="container container-fluid accordionPage">
		<div class="row">
			<div data-editor="html" data-title='Accordion Item' class="col-md-12 accordionItem">
				<h2>Accordion Item</h2>
			</div>
			<div data-editor="html" data-title='Accordion Content' class="col-md-12 accordionCopy">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			</div>
		</div>
	</div>
</body>
</html>

$('.accordionCopy').hide();
$('.accordionItem').append('<i class="fa fa-plus-circle"></i>');
$('.accordionItem').on('click', function(event) {
  event.preventDefault();
  $(this).toggleClass('open').parent().find(".accordionCopy").slideToggle("fast");
  $(this).find('i').toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
});

以上是关于javascript 手风琴 - VE友好的主要内容，如果未能解决你的问题，请参考以下文章

如何在 jQuery 中编写手风琴式 JavaScript