JavaScript 最简单的jQuery Accordian

Posted 2021-05-20

<style>
.works p {  display: none; }
</style>

<ul class="works"> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 1</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 2</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 3</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 4</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
</ul> 

<!-- replace this with the latest jQuery version -->
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script type="text/javascript"> 
$().ready(function() {   
	$('.work').click(function() {
		$('.works p').slideUp('fast');
		if ($(this).siblings('p').is(":hidden"))  $(this).siblings('p').slideDown();
		return false;
	});
});
</script>